### Getting Started

Source: https://primer.style/css/storybook?path=%2Fstory%2Futilities-grid--responsive-small

Instructions on how to get started with Primer CSS.

```APIDOC
## Getting Started

### Description
Instructions on how to install and begin using Primer CSS.

### Method
N/A

### Endpoint
N/A

### Parameters
N/A

### Request Example
N/A

### Response
N/A
```

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

### Primer CSS - Contributing and Getting Started

Source: https://primer.style/css/storybook?globals=theme%3Alight&path=%2Fstory%2Futilities-color--new-background

Information on how to contribute to Primer CSS and how to get started using it.

```APIDOC
## Contributing to Primer CSS

### Description
Information for developers who wish to contribute to the Primer CSS project, including setup and contribution guidelines.

### Getting Started

Instructions on how to install and integrate Primer CSS into your project.

**Installation**: 
```bash
npm install @primer/css
```

**Usage**: 
Import the necessary CSS files into your project.

```scss
@import "@primer/css/index.scss";
```

### Contribution Guidelines

- Fork the repository.
- Create a new branch for your feature or bug fix.
- Make your changes and ensure they follow the project's coding standards.
- Run tests to verify your changes.
- Submit a pull request.
```

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

### Displaying a GitHub-themed Header

Source: https://primer.style/css/storybook?path=%2Fstory%2Futilities-grid--flexbox

This example shows how to structure a basic GitHub-style header. No specific setup is required beyond including the Primer CSS library.

```html
<h1>
  GitHub
</h1>
<p>
  How people build software.
</p>
<a href="https://github.com/about">
  https://github.com/about
</a>
```

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

### Install Primer Primitives

Source: https://primer.style/product/primitives

Install the package using npm or yarn.

```shell
npm install @primer/primitives
```

```shell
yarn add @primer/primitives
```

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

### Install Primer JavaScript Packages

Source: https://primer.style/product/getting-started/rails

Install necessary Primer JavaScript packages using yarn. Ensure yarn is installed if your project does not have a package.json.

```bash
yarn add @primer/view-components @primer/css @primer/primitives
```

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

### Install Primer React dependencies

Source: https://primer.style/product/getting-started/react

Run this command to install the core library and its required peer dependencies.

```bash
npm install @primer/react @primer/primitives react react-dom
```

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

### Install Primer Brand via npm

Source: https://primer.style/brand/introduction/getting-started

Install the package using the npm command line tool.

```bash
npm install @primer/react-brand
```

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

### Code Block Example for Packages

Source: https://primer.style/product/ui-patterns/empty-states

Use a code block to display instructions or steps for getting started with a feature, such as with packages in GitHub.

```plaintext
npm install --save some-package
# or
yarn add some-package
```

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

### Select Component Examples

Source: https://primer.style/brand/forms/Select

Examples demonstrating various use cases and configurations of the Select component.

```APIDOC
## Examples

### Default
```jsx
<Select>
  <Select.Option value="1">One</Select.Option>
  <Select.Option value="2">Two</Select.Option>
</Select>
```

### Placeholder
```jsx
<Select placeholder="Choose one...">
  <Select.Option value="1">One</Select.Option>
  <Select.Option value="2">Two</Select.Option>
</Select>
```

### Option groups
```jsx
<Select>
  <Select.OptGroup label="Group 1">
    <Select.Option value="1">Option 1</Select.Option>
    <Select.Option value="2">Option 2</Select.Option>
  </Select.OptGroup>
  <Select.OptGroup label="Group 2">
    <Select.Option value="3">Option 3</Select.Option>
  </Select.OptGroup>
</Select>
```

### Use with `FormControl`
Use `Select` alongside `FormControl` to ensure the control has a corresponding form label.

```jsx
<FormControl>
  <FormControl.Label>Label</FormControl.Label>
  <Select>
    <Select.Option value="1">One</Select.Option>
    <Select.Option value="2">Two</Select.Option>
  </Select>
</FormControl>
```

### Validation
```jsx
<Select validationStatus="error">
  <Select.Option value="1">One</Select.Option>
  <Select.Option value="2">Two</Select.Option>
</Select>

<Select validationStatus="success">
  <Select.Option value="1">One</Select.Option>
  <Select.Option value="2">Two</Select.Option>
</Select>
```

### Full width
```jsx
<Select fullWidth>
  <Select.Option value="1">One</Select.Option>
  <Select.Option value="2">Two</Select.Option>
</Select>
```

### Sizes
`FormControl` can appear in `medium` and `large` dimensions using the `size` prop.

```jsx
<Select size="medium">
  <Select.Option value="1">Medium</Select.Option>
</Select>

<Select size="large">
  <Select.Option value="1">Large</Select.Option>
</Select>
```

### Required
Pass the `required` prop to ensure that the input field must be filled out before submitting the form.

```jsx
<Select required>
  <Select.Option value="1">One</Select.Option>
  <Select.Option value="2">Two</Select.Option>
</Select>
```

### Using `refs`
`Select` inputs can be used in uncontrolled mode by forwarding a `ref` to the underlying element.

```jsx
const selectRef = React.useRef(null);

<Select ref={selectRef}>
  <Select.Option value="1">One</Select.Option>
  <Select.Option value="2">Two</Select.Option>
</Select>
```
```

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

### Component Documentation Example

Source: https://primer.style/css/storybook?globals=theme%3Alight&path=%2Fstory%2Futilities-layout--table

Example structure for documenting a component with properties.

```APIDOC
## Component: Example Component

### Description
This component is used for demonstrating property documentation.

### Method
N/A

### Endpoint
N/A

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
- **propertyName** (string) - Required - This is a short description summary. Default value: `defaultValue`
- **anotherProperty** (string) - Required - This is a short description summary. Default value: `defaultValue`

### Request Example
```json
{
  "propertyName": "value",
  "anotherProperty": "anotherValue"
}
```

### Response
#### Success Response (200)
- **propertyName** (string) - This is a short description summary.
- **anotherProperty** (string) - This is a short description summary.

#### Response Example
```json
{
  "propertyName": "exampleValue",
  "anotherProperty": "exampleAnotherValue"
}
```
```

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

### Install stylelint globally

Source: https://primer.style/css/storybook?path=%2Fdocs%2Fsupport-linting--docs

Use npm to install stylelint as a global command-line tool.

```bash
npm install -g stylelint
```

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

### React Examples

Source: https://primer.style/product/components/counter-label

Examples demonstrating the usage of the CounterLabel component in React.

```APIDOC
## React Examples

### Default Usage

```jsx
<CounterLabel>12</CounterLabel>
```

### Scheme Variants

The `primary` variant is visually heavier than the default.

```jsx
<Stack direction="horizontal">
  <CounterLabel>12</CounterLabel>
  <CounterLabel scheme="primary">12</CounterLabel>
</Stack>
```
```

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

### Install Primer ViewComponents Gem

Source: https://primer.style/product/getting-started/rails

Add the primer_view_components gem to your Gemfile and run bundle install.

```ruby
gem "primer_view_components"

bundle install
```

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

### Compare All Themes

Source: https://primer.style/css/storybook?path=%2Fdocs%2Fsupport-theming--docs

Example demonstrating the application of various theme configurations.

```html
<div data-color-mode="light" data-light-theme="light">...</div>
<div data-color-mode="dark" data-dark-theme="dark">...</div>
<div data-color-mode="dark" data-dark-theme="dark_dimmed">...</div>
<div data-color-mode="dark" data-dark-theme="dark_high_contrast">...</div>
```

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

### Example Property Documentation

Source: https://primer.style/css/storybook?globals=theme%3Alight&path=%2Fstory%2Futilities-margin--negative-extended

Example of property documentation within Primer CSS.

```APIDOC
## Property Documentation Example

### Description
This section details a property with its description, default value, and control type.

### Method
N/A

### Endpoint
N/A

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
- **propertyName*** (string) - Required - This is a short description summary

### Request Example
```json
{
  "propertyName": "defaultValue"
}
```

### Response
#### Success Response (200)
- **propertyName** (string) - This is a short description summary

#### Response Example
```json
{
  "propertyName": "defaultValue"
}
```
```

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

### Install eslint-plugin-primer-react

Source: https://primer.style/product/getting-started/react/linting

Install the ESLint plugin as a development dependency using npm or yarn.

```bash
npm install --save-dev eslint-plugin-primer-react
```

```bash
yarn add --dev eslint-plugin-primer-react
```

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

### UnderlineNav Storybook Example

Source: https://primer.style/react/storybook?path=%2Fstory%2Fcomponents-underlinenav--playground

A Storybook example demonstrating how to use the UnderlineNav and UnderlineNavItem components.

```APIDOC
## UnderlineNav Storybook Example

### Description
This example shows how to render the UnderlineNav component with multiple UnderlineNavItem children.

### Code
```javascript
args => {
  const children = ['Code', 'Pull requests', 'Actions', 'Projects', 'Wiki'];
  return <UnderlineNav {...args}>
      {children.map((child, index) => <UnderlineNavItem key={index} href="#" aria-current={index === 0 ? 'page' : undefined}>
          {child}
        </UnderlineNavItem>)}
    </UnderlineNav>;
}
```
```

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

### Flexbox Utility Example

Source: https://primer.style/css/storybook?globals=theme%3Alight&path=%2Fstory%2Futilities-flexbox--flex-grow-0

Example usage of flex-auto and responsive grow utilities on a flex item.

```css
.flex-auto .flex-sm-grow-0
```

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

### Avatar Component Examples

Source: https://primer.style/view-components/lookbook/inspect/primer/beta/avatar/shape

Examples demonstrating how to render the Avatar component with different shapes.

```APIDOC
## Avatar Component

### Description

This section shows how to render the Avatar component with different shapes.

### Circle Avatar

```ruby
render(Primer::Beta::Avatar.new(shape: :circle, src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
```

### Square Avatar

```ruby
render(Primer::Beta::Avatar.new(shape: :square, src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
```

### Parameters

No parameters are configured for this component.

### Request Example

No request body is applicable for this component.

### Response

No specific response is applicable for this component.
```

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

### Default Tooltip Example

Source: https://primer.style/product/components/tooltip

A basic example of the Tooltip component with default settings.

```APIDOC
## POST /api/users

### Description
This endpoint creates a new user.

### Method
POST

### Endpoint
/api/users

### Parameters
#### Request Body
- **username** (string) - Required - The username for the new user.
- **email** (string) - Required - The email address for the new user.
- **password** (string) - Required - The password for the new user.

### Request Example
```json
{
  "username": "johndoe",
  "email": "john.doe@example.com",
  "password": "securepassword123"
}
```

### Response
#### Success Response (201)
- **id** (string) - The unique identifier for the newly created user.
- **username** (string) - The username of the created user.
- **email** (string) - The email address of the created user.

#### Response Example
```json
{
  "id": "user-12345",
  "username": "johndoe",
  "email": "john.doe@example.com"
}
```
```

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

### Default useConfirm Example

Source: https://primer.style/product/hooks/useConfirm

This example demonstrates the basic usage of the useConfirm hook. It shows a button that, when clicked, prompts the user with a confirmation dialog. The state is updated based on the user's confirmation.

```javascript
import React from 'react'
import {useConfirm} from '@primer/react'


export default function Default() {
  const [isUsingPrimer, setIsUsingPrimer] = React.useState(true)
  const confirm = useConfirm()
  const confirmStopUsingPrimer = React.useCallback(async () => {
    if (await confirm({title: 'Are you sure?', content: 'Using Primer is cool and fun.'})) {
      setIsUsingPrimer(false)
    }
  }, [confirm])
  const handleStartUsingPrimer = () => {
    setIsUsingPrimer(true)
  }


  return (
    <button onClick={isUsingPrimer ? confirmStopUsingPrimer : handleStartUsingPrimer}>
      {isUsingPrimer ? 'Stop' : 'Start'} using Primer
    </button>
  )
}
```

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

### React Popover Example

Source: https://primer.style/product/components/popover

A basic example demonstrating how to use the Popover component in React.

```APIDOC
## React Popover Example

### Description
This example shows the default usage of the Popover component.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```jsx
<Popover relative open>
  <Popover.Content>Popover content</Popover.Content>
</Popover>
```

### Response
#### Success Response (200)
N/A (Component Usage)

#### Response Example
N/A (Component Usage)
```

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

### Run bundle install

Source: https://primer.style/css/storybook?path=%2Fdocs%2Fgettingstarted--docs

Execute this command in your terminal after updating your Gemfile to install the specified gems.

```bash
$ bundle install
```

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

### Grid Component Examples

Source: https://primer.style/brand/layout/Grid/react

Examples demonstrating the usage of the Grid component for default, nested, responsive, and offset layouts.

```APIDOC
## Grid Component Examples

### Default Grid

```jsx
import {Grid} from '@primer/react-brand'

<Grid>
  <Grid.Column span={6}>Column 1</Grid.Column>
  <Grid.Column span={6}>Column 2</Grid.Column>
</Grid>
```

### Nested Grids

```jsx
import {Grid} from '@primer/react-brand'

<Grid>
  <Grid.Column span={6}>
    <Grid>
      <Grid.Column span={6}>Nested Column 1</Grid.Column>
      <Grid.Column span={6}>Nested Column 2</Grid.Column>
    </Grid>
  </Grid.Column>
  <Grid.Column span={6}>Outer Column 2</Grid.Column>
</Grid>
```

### Responsive Behavior

Use `span` with an `Object` of breakpoint-specific keys and `number` values to enable responsive behavior.
Breakpoints use `min-width`, where it will also apply your chosen `span` value to all larger breakpoints.

```jsx
import {Grid} from '@primer/react-brand'

<Grid>
  <Grid.Column
    span={{
      default: 12,
      medium: 6,
      large: 4,
    }}
  >
    Column spanning 12, then 6, then 4 columns.
  </Grid.Column>
  <Grid.Column
    span={{
      default: 12,
      medium: 6,
      large: 8,
    }}
  >
    Column spanning 12, then 6, then 8 columns.
  </Grid.Column>
</Grid>
```

### Column Offset

Use `start` to provide a positioning offset.

```jsx
import {Grid} from '@primer/react-brand'

<Grid>
  <Grid.Column start={5} span={4}>Column with offset</Grid.Column>
</Grid>
```
```

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

### Responsive Flex Utility Examples

Source: https://primer.style/product/css-utilities/flexbox

Examples of how to apply flexbox utilities at specific breakpoints using the d-[breakpoint]-[property] and flex-[breakpoint]-[property]-[behavior] naming conventions.

```css
/* Example classes */

.d-sm-flex {
}
.d-md-inline-flex {
}

.flex-lg-row {
}
.flex-xl-column {
}

.flex-sm-wrap {
}
.flex-lg-nowrap {
}

.flex-lg-self-start {
}
```

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

### SubdomainNavBar Usage Examples

Source: https://primer.style/brand/components/SubdomainNavBar

Examples demonstrating the basic usage and search functionality of the SubdomainNavBar component.

```APIDOC
## Examples

`SubdomainNavBar` is designed to fix to the top of the viewport. Please refer to our Storybook examples to see the component in a full-screen browser as originally intended.

### Basic

```jsx
<SubdomainNavBar>
  <SubdomainNavBar.Link href="#">Link 1</SubdomainNavBar.Link>
  <SubdomainNavBar.Link href="#">Link 2</SubdomainNavBar.Link>
</SubdomainNavBar>
```

### Search

`SubdomainNavBar` offers an optional search form control. The form can operate in both `onSubmit` and `onChange` modes, with the latter facilitating inline results to appear.

```jsx
<SubdomainNavBar>
  <SubdomainNavBar.Search onSubmit={(query) => console.log(query)} />
</SubdomainNavBar>
```
```

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

### Block Code Examples

Source: https://primer.style/view-components/lookbook/preview/primer/beta/markdown/default?_display=%257B%2522theme%2522%253A%2522light%2522%257D

Demonstrates standard and syntax-highlighted code blocks.

```javascript
var foo = "bar";
```

```javascript
var foo = "bar";
```

```text
Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long. They should also have a tabindex=0 to ensure keyboard accessibility. This line should be long enough to demonstrate this.
```

```javascript
var foo = "The same thing is true for code with syntax highlighting. A single line of code should horizontally scroll if it is really long.";
```

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

### Text Component Example - Changing Size and Weight

Source: https://primer.style/components/text

This example demonstrates changing the size and weight of text. Note that this functionality requires an updated version of `@primer/react`.

```html
<span>
  This example will not work until we have upgrade `@primer/react` to a version that supports the `size` and `weight`
  props
</span>
```

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

### Default AnchoredOverlay Example

Source: https://primer.style/product/components/anchored-overlay

This is a basic example of how to use AnchoredOverlay. It renders a button that toggles the overlay when clicked. Ensure you import React, AnchoredOverlay, Button, and Stack from '@primer/react'.

```jsx
import React from 'react'
import {AnchoredOverlay, Button, Stack} from '@primer/react'


export default function Default() {
  const [open, setOpen] = React.useState(false)


  return (
    <AnchoredOverlay
      open={open}
      onOpen={() => setOpen(true)}
      onClose={() => setOpen(false)}
      renderAnchor={props => <Button {...props}>Toggle overlay</Button>}
    >
      <Stack padding="spacious">
        Anchored overlay content
        <Button
          block
          onClick={() => {
            setOpen(false)
          }}
        >
          Close
        </Button>
      </Stack>
    </AnchoredOverlay>
  )
}



```

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

### Link Component Ruby Examples

Source: https://primer.style/view-components/lookbook/inspect/primer/beta/link/color_scheme

These Ruby examples show how to render Primer's Link component using the view component pattern. Customize links by specifying the `href` and `scheme` arguments, and use `muted: true` for muted variations.

```ruby
render(Primer::Beta::Link.new(href: "#")) { "This is a default link color." }
render(Primer::Beta::Link.new(href: "#", scheme: :primary)) { "This is a primary link color." }
render(Primer::Beta::Link.new(href: "#", scheme: :primary, muted: true)) { "This is a muted primary link color." }
render(Primer::Beta::Link.new(href: "#", scheme: :secondary)) { "This is a secondary link color." }
render(Primer::Beta::Link.new(href: "#", scheme: :secondary, muted: true)) { "This is a muted secondary link color." }
```

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

### Initialize npm Project

Source: https://primer.style/css/storybook?path=%2Fdocs%2Fgettingstarted--docs

Begin by initializing your project with a `package.json` file. This is a prerequisite for installing npm packages like Primer CSS.

```bash
npm init -y
```

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

### Utility Classes

Source: https://primer.style/css/storybook/iframe.html?id=utilities-layout--floats-responsive

Examples of utility classes for responsive styling.

```APIDOC
## Utility Classes

### Description
Provides examples of responsive utility classes for layout control.

### Endpoint
N/A (These are CSS classes, not API endpoints)

### Usage Example
```html
<div class="float-md-left">...</div>
<div class="float-md-right">...</div>
```
```

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

### PageLayout with Sidebar at Start

Source: https://primer.style/product/components/page-layout

Use this component to create a page layout where the sidebar appears on the left side by default. Ensure React and '@primer/react' are installed.

```jsx
import React from 'react'
import {PageLayout} from '@primer/react'


function Placeholder({height, children}: {height: number | string; children: React.ReactNode}) {
  return (
    <div
      style={{
        width: '100%',
        height,
        display: 'grid',
        placeItems: 'center',
        backgroundColor: 'var(--bgColor-inset)',
        borderRadius: 'var(--borderRadius-medium)',
        border: '1px solid var(--borderColor-muted)',
      }}
    >
      {children}
    </div>
  )
}


export default function SidebarStart() {
  return (
    <PageLayout>
      <PageLayout.Sidebar width={{min: '100px', default: '200px', max: '200px'}}>
        <Placeholder height={528}>Sidebar</Placeholder>
      </PageLayout.Sidebar>
      <PageLayout.Header>
        <Placeholder height={64}>Header</Placeholder>
      </PageLayout.Header>
      <PageLayout.Content>
        <Placeholder height={400}>Content</Placeholder>
      </PageLayout.Content>
      <PageLayout.Footer>
        <Placeholder height={64}>Footer</Placeholder>
      </PageLayout.Footer>
    </PageLayout>
  )
}
```

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

### Primer CSS Support and Principles

Source: https://primer.style/css/storybook?globals=theme%3Alight&path=%2Fstory%2Futilities-margin--uniform

Documentation on contributing, getting started, accessibility, HTML structure, principles, SCSS, and support resources for Primer CSS.

```APIDOC
## Primer CSS Support and Principles

### Description
This section outlines the guiding principles, support information, and contribution guidelines for Primer CSS.

### Topics
- **Contributing**: Guidelines for contributing to Primer CSS.
- **Getting Started**: Instructions on how to begin using Primer CSS.
- **Accessibility**: Best practices for accessibility in Primer CSS.
- **HTML**: Guidelines for HTML structure.
- **Principles**: Core design and development principles.
- **SCSS**: Information on using and extending SCSS.
- **Support**: Resources for obtaining support.
- **Breakpoints**: Information on responsive breakpoints.
- **Deprecations**: Details on deprecated features.
- **Linting**: Guidelines for code linting.
- **Prototyping**: Information on prototyping with Primer CSS.
- **Spacing**: Documentation on spacing utilities.
- **Theming**: Information on theming Primer CSS.
- **Typography**: Documentation on typography settings.
```

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

### Primer Style Component Usage

Source: https://primer.style/view-components/lookbook/inspect/primer/beta/blankslate/with_image

Demonstrates how to initialize the component with a heading and visual image.

```APIDOC
## Component Initialization

### Description
Initializes the component with a specific heading tag and a visual image source.

### Request Example
component.with_heading(tag: :h2).with_content("Millions of teams trust GitHub to keep their work safe")
component.with_visual_image(src: Primer::ExampleImage::BASE64_SRC, alt: "Security - secure vault")
```

```APIDOC
## Component Parameters

### Parameters
#### Configuration Options
- **Narrow** - Optional - Layout constraint
- **Spacious** - Optional - Layout constraint
- **Border** - Optional - Visual styling constraint
```

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

### Blankslate with graphic and actions

Source: https://primer.style/product/components/blankslate/guidelines

Example of a Blankslate component including a graphic, primary text, secondary text, and a primary action button. Used to guide users when content is absent.

```jsx
function BlankslateExample() {
  return (
    <Blankslate>
      <Blankslate.Visual>
        <Octicon icon={RepoIcon} size={48} />
      </Blankslate.Visual>
      <Blankslate.Heading>Create your first repository</Blankslate.Heading>
      <Blankslate.Subtitle>
        A repository contains all the project files, including the README and version history.
      </Blankslate.Subtitle>
      <Blankslate.PrimaryAction>
        <Button>New repository</Button>
      </Blankslate.PrimaryAction>
    </Blankslate>
  )
}
```

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

### Embed Lookbook Component

Source: https://primer.style/view-components/lookbook/inspect/primer/forms/check_box_with_nested_form

Use this embed code to display a specific Primer component scenario within your documentation or examples. Ensure the app and preview paths are correct for your setup.

```html
<lookbook-embed app="https://primer-lookbook.github.com/view-components/lookbook/" preview="Primer::FormsPreview" scenario="check_box_with_nested_form"></lookbook-embed>
```

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

### Responsive Touch Target Example

Source: https://primer.style/primitives/storybook?path=%2Fstory%2Fsize-functional-control--control-touch-target-responsive

Demonstrates the token for responsive touch target sizing, showing values for coarse and fine pointers.

```css
--control-minTarget-auto: 2.75rem
```

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

### DataTable with Row Actions

Source: https://primer.style/product/components/data-table

Example of a DataTable component with a custom 'Actions' column that includes an IconButton for each row. This setup is suitable for single, prominent actions per row. Ensure necessary imports like IconButton, RelativeTime, and DataTable are included.

```jsx
import React from 'react'
import {IconButton, RelativeTime} from '@primer/react'
import {Table, DataTable} from '@primer/react/experimental'
import {DownloadIcon} from '@primer/octicons-react'

export default function RowAction() {
  return (
    <Table.Container>
      <Table.Title as="h2" id="repositories-rowAction">
        Repositories
      </Table.Title>
      <DataTable
        aria-labelledby="repositories-rowAction"
        data={data}
        columns={[
          {
            header: 'Repository',
            field: 'name',
            rowHeader: true,
          },
          {
            header: 'Type',
            field: 'type',
          },
          {
            header: 'Updated',
            field: 'updatedAt',
            renderCell: row => {
              return <RelativeTime date={new Date(row.updatedAt)} />
            },
          },
          {
            header: 'Dependabot',
            field: 'securityFeatures.dependabot',
          },
          {
            header: 'Code scanning',
            field: 'securityFeatures.codeScanning',
          },
          {
            id: 'actions',
            // The header is styled to be visually hidden, but still accessible to screen readers
            header: () => (
              <span
                style={{
                  clipPath: 'inset(50%)',
                  height: '1px',
                  overflow: 'hidden',
                  position: 'absolute',
                  whiteSpace: 'nowrap',
                  width: '1px',
                }}
              >
                Actions
              </span>
            ),
            renderCell: row => {
              return (
                <IconButton
                  aria-label={`Download: ${row.name}`}
                  title={`Download: ${row.name}`}
                  icon={DownloadIcon}
                  variant="invisible"
                  onClick={() => {
                    alert(`Fake downloading ${row.name}`)
                  }}
                />
              )
            },
          },
        ]}
      />
    </Table.Container>
  )
}

const now = Date.now()
const Second = 1000
const Minute = 60 * Second
const Hour = 60 * Minute
const Day = 24 * Hour
const Week = 7 * Day
const Month = 4 * Week

const data: Array<{ id: number; name: string; type: 'Public' | 'Internal'; updatedAt: number; securityFeatures: { dependabot: string; codeScanning: string } }> = [
  {
    id: 1,
    name: 'codeql-dca-worker',
    type: 'Internal',
    updatedAt: now,
    securityFeatures: {
      dependabot: 'Alerts',
      codeScanning: 'Report secrets',
    },
  },
  {
    id: 2,
    name: 'aegir',
    type: 'Public',
    updatedAt: now - 5 * Minute,
    securityFeatures: {
      dependabot: 'Alerts',
      codeScanning: 'Report secrets',
    },
  },
  {
    id: 3,
    name: 'strapi',
    type: 'Public',
    updatedAt: now - 1 * Hour,
    securityFeatures: {
      dependabot: '',
      codeScanning: '',
    },
  },
  {
    id: 4,
    name: 'codeql-ci-nightlies',
    type: 'Public',
    updatedAt: now - 6 * Hour,
    securityFeatures: {
      dependabot: 'Alerts',
      codeScanning: '',
    },
  },
  {
    id: 5,
    name: 'dependabot-updates',
    type: 'Public',
    updatedAt: now - 1 * Day,
    securityFeatures: {
      dependabot: '',
      codeScanning: '',
    },
  },
  {
    id: 6,
    name: 'tsx-create-react-app',
    type: 'Public',
    updatedAt: now - 1 * Week,
    securityFeatures: {
      dependabot: '',
      codeScanning: '',
    },
  },
  {
    id: 7,
    name: 'bootstrap',
    type: 'Public',
    updatedAt: now - 1 * Month,
    securityFeatures: {
      dependabot: 'Alerts',
      codeScanning: '',
    },
  },
  {
    id: 8,
    name: 'docker-templates',
    type: 'Public',
    updatedAt: now - 3 * Month,
    securityFeatures: {
      dependabot: 'Alerts',
      codeScanning: '',
    },
  },
]

```

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

### Create a simple HTML prototype with Primer CSS

Source: https://primer.style/css/storybook?path=%2Fdocs%2Fsupport-prototyping--docs

Use this HTML boilerplate to start a prototype. It links to the Primer CSS CDN for immediate access to all core, product, and marketing modules.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" />
  </head>
  <body></body>
</html>
```

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

### Introduction

Source: https://primer.style/css/storybook?path=%2Fstory%2Futilities-grid--responsive-small

Introduction to Primer CSS.

```APIDOC
## Introduction

### Description
An introduction to the Primer CSS framework.

### Method
N/A

### Endpoint
N/A

### Parameters
N/A

### Request Example
N/A

### Response
N/A
```

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

### SplitPageLayout with Navigation and Danger Zone

Source: https://primer.style/product/components/split-page-layout

This example demonstrates a typical use case for SplitPageLayout, featuring a navigation sidebar on the 'start' pane and a content area that includes a 'Danger zone' with account deletion options. It utilizes various Primer components like NavList, Heading, and Button.

```jsx
<SplitPageLayout>
  <SplitPageLayout.Pane position="start">
    <NavList aria-label="Main navigation">
      <NavList.Item href="#">Profile</NavList.Item>
      <NavList.Item href="#" aria-current="page">
        Account
      </NavList.Item>
      <NavList.Item href="#">Emails</NavList.Item>
      <NavList.Item href="#">Notifications</NavList.Item>
    </NavList>
  </SplitPageLayout.Pane>
  <SplitPageLayout.Content>
    <Heading
      as="h2"
      style={{
        fontSize: '2em',
        fontWeight: 'normal',
        color: 'var(--fgColor-danger,var(--color-danger-fg,#d1242f))',
        marginBottom: '1rem',
      }}
    >
      Danger zone
    </Heading>
    <div
      style={{
        border: '1px solid',
        borderColor: 'var(--borderColor-danger-emphasis,var(--color-danger-emphasis,#cf222e))',
        borderRadius: '1rem',
        padding: '1rem',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        gap: '1rem',
      }}
    >
      <div style={{display: 'grid', gap: '1rem'}}>
        <p
          style={{
            fontSize: '1em',
            fontWeight: 'bold',
            color: 'var(--fgColor-danger,var(--color-danger-fg,#d1242f))',
          }}
        >
          Delete account
        </p>
        <p style={{fontSize: '1em', color: 'var(--fgColor-muted,var(--color-fg-muted,#6a737d))'}}>
          Are you sure you don&apos;t want to just downgrade your account to a free account? We won&apos;t charge your
          credit card anymore.
        </p>
      </div>
      <Button variant="danger">Delete account</Button>
    </div>
  </SplitPageLayout.Content>
</SplitPageLayout>
```

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

### Table Example

Source: https://primer.style/css/storybook?path=%2Fstory%2Futilities-typography--text-alignment

Example of a table structure with properties.

```APIDOC
## Table Example

### Description
This table outlines properties for a component.

### Endpoint
N/A

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
- **propertyName** (string) - Required - This is a short description summary
- **propertyName** (string) - Required - This is a short description summary
- **propertyName** (string) - Required - This is a short description summary

### Request Example
```json
{
  "propertyName": "defaultValue",
  "propertyName": "defaultValue",
  "propertyName": "defaultValue"
}
```

### Response
#### Success Response (200)
- **field1** (type) - Description

#### Response Example
```json
{
  "example": "response body"
}
```
```

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

### NavList Component Example

Source: https://primer.style/view-components/lookbook/inspect/primer/beta/nav_list/group_long_label_with_tooltip

Demonstrates the creation and configuration of a NavList component with a repository settings heading and several nested items, including 'Reported content'.

```APIDOC
## NavList Component

### Description
This section shows how to render a `NavList` component with a heading and a list of items. It includes an example of a nested item for 'Reported content'.

### Method
N/A (Component Rendering)

### Endpoint
N/A (Component Rendering)

### Parameters
#### Request Body
- **list** (object) - Required - The NavList object to configure.
  - **heading** (object) - Required - Configuration for the list heading.
    - **title** (string) - Required - The text for the heading.
  - **item** (object) - Required - Configuration for a list item.
    - **label** (string) - Required - The main text for the item.
    - **truncate_label** (string) - Optional - How to handle long labels (e.g., :show_tooltip).
    - **leading_visual_icon** (object) - Optional - Configuration for an icon preceding the item.
      - **icon** (string) - Required - The name of the icon.
    - **nested_items** (array) - Optional - A list of sub-items within this item.
      - **label** (string) - Required - The text for the sub-item.
      - **href** (string) - Required - The URL for the sub-item.
      - **selected_by_ids** (string) - Optional - Identifier to mark the item as selected.

### Request Example
```ruby
render(Primer::Beta::NavList.new) do |list|
  list.with_heading(title: "Repository settings")
  list.with_item(label: "Really really long label that may wrap, truncate, or appear as a tooltip", truncate_label: :show_tooltip) do |item|
    item.with_leading_visual_icon(icon: :"comment-discussion")
    item.with_item(label: "Interaction limits", href: "/interaction-limits", selected_by_ids: :interaction_limits)
    item.with_item(label: "Code review limits", href: "/review-limits", selected_by_ids: :code_review_limits)
    item.with_item(label: "Reported content", href: "/reported-content", selected_by_ids: :reported_content)
  end
end
```

### Response
#### Success Response (200)
- **rendered_html** (string) - The HTML output of the rendered NavList component.

#### Response Example
```html
<nav-list>
  <nav>
    <ul>
      <li>
        <h3>Repository settings</h3>
        <ul>
          <li>
            <a href="/interaction-limits">
              <span class="Icon Icon--comment-discussion"></span>
              <span>Interaction limits</span>
            </a>
          </li>
          <li>
            <a href="/review-limits">
              <span class="Icon Icon--comment-discussion"></span>
              <span>Code review limits</span>
            </a>
          </li>
          <li>
            <a href="/reported-content">
              <span class="Icon Icon--comment-discussion"></span>
              <span>Reported content</span>
            </a>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
</nav-list>
```
```

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

### Component Initialization: Primer::Beta::Details

Source: https://primer.style/view-components/lookbook/inspect/primer/beta/details/without_button

Parameters for initializing the Primer Beta Details component in a Ruby environment.

```APIDOC
## Primer::Beta::Details Initialization

### Description
Parameters used when rendering the Primer::Beta::Details component.

### Parameters
- **Overlay** (string) - Optional - Defines the overlay style. Options: none, default, dark.
- **Reset** (boolean) - Optional - Defines if the component styles should be reset.
```

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

### Install React Octicons

Source: https://primer.style/octicons/code

Install the package via npm.

```bash
npm install @primer/octicons-react
```

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

### Component Properties Example

Source: https://primer.style/css/storybook?globals=theme%3Alight&path=%2Fstory%2Futilities-flexbox--row-reverse

Example of component properties and their descriptions.

```APIDOC
## Component Properties

### Description
This table outlines the properties for a component.

### Method
N/A

### Endpoint
N/A

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
- **propertyName*** (string) - Required - This is a short descriptionsummary
- **propertyName*** (string) - Required - This is a short descriptionsummary
- **propertyName*** (string) - Required - This is a short descriptionsummary

### Request Example
```json
{
  "propertyName": "defaultValue"
}
```

### Response
#### Success Response (200)
- **propertyName** (string) - Description of the property

#### Response Example
```json
{
  "propertyName": "value"
}
```
```

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

### Usage Example for Primer::Beta::Truncate

Source: https://primer.style/view-components/lookbook/inspect/primer/beta/truncate/default

Demonstrates how to render the Primer::Beta::Truncate component with provided text.

```APIDOC
## Render Primer::Beta::Truncate

### Description
This section shows how to render the Primer::Beta::Truncate component in your application using Ruby code.

### Method
```ruby
render(Primer::Beta::Truncate.new) { text }
```

### Parameters
#### Request Body
- **text** (String) - Required - The text content to be truncated.
```

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

### Storybook Controls Example

Source: https://primer.style/css

Example of how controls are defined for a component in Storybook.

```APIDOC
## Storybook Controls Example

This table demonstrates the structure for defining controls in Storybook.

### Controls

| Name | Description | Default | Control |
|---|---|---|---|
| propertyName* | This is a short description summary | defaultValue | Set string |
| propertyName* | This is a short description summary | defaultValue | Set string |
| propertyName* | This is a short description summary | defaultValue | Set string |
```

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

### Install Rails Octicons

Source: https://primer.style/octicons/code

Add the gem to your Gemfile and run bundle install.

```ruby
# Gemfile
gem "primer_view_components"
```

```bash
bundle install
```

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

### Ruby Renderings for Primer Labels

Source: https://primer.style/view-components/lookbook/inspect/primer/beta/label/color_schemes

Demonstrates how to render different Primer Label styles using Ruby. Each example shows the `render` method with the `Primer::Beta::Label` component and a specific scheme.

```ruby
render(Primer::Beta::Label.new) { "Default" }
```

```ruby
render(Primer::Beta::Label.new(scheme: :primary)) { "Primary" }
```

```ruby
render(Primer::Beta::Label.new(scheme: :secondary)) { "Secondary" }
```

```ruby
render(Primer::Beta::Label.new(scheme: :accent)) { "Accent" }
```

```ruby
render(Primer::Beta::Label.new(scheme: :success)) { "Success" }
```

```ruby
render(Primer::Beta::Label.new(scheme: :attention)) { "Attention" }
```

```ruby
render(Primer::Beta::Label.new(scheme: :danger)) { "Danger" }
```

```ruby
render(Primer::Beta::Label.new(scheme: :severe)) { "Severe" }
```

```ruby
render(Primer::Beta::Label.new(scheme: :done)) { "Done" }
```

```ruby
render(Primer::Beta::Label.new(scheme: :sponsors)) { "Sponsors" }
```

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

### Apply SCSS formatting and structure

Source: https://primer.style/css/storybook?path=%2Fdocs%2Fprinciples-scss--docs

Examples demonstrating standard formatting for declarations, selector grouping, and property shorthand usage.

```scss
// Example of good basic formatting practices
.styleguide-format {
  color: #000;
  background-color: rgba(0, 0, 0, 0.5);
  border: 1px solid #0f0;
}

// Example of individual selectors getting their own lines (for error reporting)
.multiple,
.classes,
.get-new-lines {
  display: block;
}

// Avoid unnecessary shorthand declarations
.not-so-good {
  margin: 0 0 20px;
}
.good {
  margin-bottom: 20px;
}
```

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

### React Breadcrumbs Example

Source: https://primer.style/product/components/breadcrumbs

A basic example of how to implement the Breadcrumbs component in React.

```APIDOC
## React Breadcrumbs Example

### Default

```jsx
<Breadcrumbs>
  <Breadcrumbs.Item href="#">Home</Breadcrumbs.Item>
  <Breadcrumbs.Item href="#">About</Breadcrumbs.Item>
  <Breadcrumbs.Item href="#" selected>
    Team
  </Breadcrumbs.Item>
</Breadcrumbs>
```
```

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

### Primer::Alpha::UnderlinePanels Component Usage

Source: https://primer.style/view-components/lookbook/inspect/primer/alpha/underline_panels/with_icons_and_counters

Example of how to render the UnderlinePanels component with multiple tabs and panels.

```APIDOC
## Primer::Alpha::UnderlinePanels Component

### Description

This component renders a set of tabs with associated panels. It allows for customization of the number of tabs, selected tab, and content within each tab, including text, icons, and counters.

### Method

`render` (Ruby DSL)

### Endpoint

N/A (Component rendering)

### Parameters

#### Component Initialization Parameters

- **label** (String) - Required - The label for the underline panels.
- **align** (String) - Optional - The alignment of the panels. Accepts 'left' or 'right'. Defaults to 'left'.

#### Tab Configuration Parameters

- **selected** (Boolean) - Optional - Indicates if the tab is currently selected. Defaults to `false`.
- **id** (String) - Required - A unique identifier for the tab.

#### Content Configuration Parameters

- **panel** (Block) - Content for the panel associated with the tab.
- **text** (Block) - Text content for the tab itself.
- **icon** (Symbol) - Optional - An icon to display on the tab. Example: `:star`.
- **counter** (Hash) - Optional - Configuration for a counter badge on the tab. Accepts a `count` (Integer) parameter.

### Request Example

```ruby
render(Primer::Alpha::UnderlinePanels.new(label: "Test navigation", align: "right")) do |component|
  Array.new(number_of_panels || 3) do |i|
    component.with_tab(selected: i.zero?, id: "tab-" + (i + 1).to_s) do |tab|
      tab.with_panel { "Panel " + (i + 1).to_s }
      tab.with_text { "Tab " + (i + 1).to_s }
      tab.with_icon(icon: :star)
      tab.with_counter(count: (i + 1) * 5)
    end
  end
end
```

### Response

This component does not have a direct API response in the traditional sense, as it is rendered server-side. The output is HTML.

#### Success Response (200)

N/A

#### Response Example

N/A

### Additional Options

- **Pin drawer on right**
- **Pin drawer on bottom**
- **Hide drawer**

### Parameters Table

| Param | Description | Input |
|---|---|---|
| Number Of Panels |  — |   |
| Align |  — |  left right |
```

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

### Prototyping

Source: https://primer.style/css/storybook?globals=theme%3Alight&path=%2Fstory%2Futilities-shadow--large

Guidance on prototyping with Primer CSS.

```APIDOC
## Prototyping

### Description
Tips and techniques for prototyping using Primer CSS.

### Method
N/A

### Endpoint
N/A

### Parameters
N/A

### Request Example
N/A

### Response
N/A
```

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

### Token Component Example

Source: https://primer.style/react/storybook?path=%2Fstory%2Fcomponents-token-features--token-with-on-remove-fn

Demonstrates the usage of the Token component with different 'as' props (default, 'a', 'button'). Ensure the Token component is imported and available in the scope.

```jsx
<div className="prc-Token-TokenRow-dqHpn">
  <Token
    onRemove={function Z7(){}}
    size="medium"
    text="token"
  />
  <Token
    as="a"
    href="/?path=/story/components-token-features--issue-label-token-custom-colors"
    onRemove={function Z7(){}}
    size="medium"
    text="Link"
  />
  <Token
    as="button"
    onClick={function Z7(){}}
    onRemove={function Z7(){}}
    size="medium"
    text="Button"
  />
</div>
```

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

### JavaScript Path Example

Source: https://primer.style/view-components/lookbook/inspect/primer/beta/avatar/shape

Demonstrates how to define a file path in JavaScript, including handling backslashes.

```javascript
const path = "C:\\Users\\file";
```

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

### Storybook Controls Example

Source: https://primer.style/css/storybook?path=%2Fstory%2Futilities-margin--uniform

Example of how controls are presented in Storybook, including property descriptions.

```APIDOC
## Storybook Controls Example

This section illustrates the structure of controls within Storybook, showing property definitions.

### Property Definitions

| Name | Description | Default | Control |
|---|---|---|---|
| propertyName* | This is a short description summary | defaultValue | Set string |
| propertyName* | This is a short description summary | defaultValue | Set string |
| propertyName* | This is a short description summary | defaultValue | Set string |
```

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

### Deprecated Property Example

Source: https://primer.style/css/storybook?path=%2Fstory%2Fdeprecated-selectmenu--default

Example of a deprecated property with its description, default value, and control.

```APIDOC
## Deprecated Property Example

This demonstrates the structure for documenting deprecated properties.

### Deprecated Properties

| Name | Description | Default | Control |
|---|---|---|---|
| propertyName* | This is a short descriptionsummary | defaultValue | Set string |
| propertyName* | This is a short descriptionsummary | defaultValue | Set string |
| propertyName* | This is a short descriptionsummary | defaultValue | Set string |
```