### DsrModeContextProvider Usage Examples

Source: https://react-desyre.gke2.ope.gcp.renault.com/components-custom/dsr-mode-context-provider

Examples demonstrating how to install and use the DsrModeContextProvider component in various configurations.

```APIDOC
## Installation

### Description
Import the `DsrModeContextProvider` component and related types/hooks from the `@desyre/react-mui` package.

### Method
N/A

### Endpoint
N/A

### Code
```javascript
import {
  DsrModeContextProvider,
  DsrModeContextProviderProps,
  useModeContext,
  Mode,
  ModeContext,
} from '@desyre/react-mui';
```

## Basic Usage

### Description
Provides the storage to use for the mode context.

### Method
N/A

### Endpoint
N/A

### Code
```javascript
import { DsrModeContextProvider, DsrModeContextProviderProps } from '@desyre/react-mui';

const ModeContextProvider = ({ children }) => {
  const props: DsrModeContextProviderProps = {
    storage: window.localStorage,
  };
  return <DsrModeContextProvider {...props}>{children}</DsrModeContextProvider>;
};
```

## With Custom Default Theme

### Description
Allows you to set the default theme of the application.

### Method
N/A

### Endpoint
N/A

### Code
```javascript
import { DsrModeContextProvider, DsrModeContextProviderProps } from '@desyre/react-mui';

const ModeContextProvider = ({ children }) => {
  const defaultTheme: Mode = 'light';
  const props: DsrModeContextProviderProps = {
    storage: window.localStorage,
    defaultTheme,
  };
  return <DsrModeContextProvider {...props}>{children}</DsrModeContextProvider>;
};
```

## With Force Mode on Initialisation

### Description
Allows you to force the mode of the application on initialisation.

### Method
N/A

### Endpoint
N/A

### Code
```javascript
import { DsrModeContextProvider, DsrModeContextProviderProps } from '@desyre/react-mui';

const ModeContextProvider = ({ children }) => {
  const initTheme: Mode = 'light';
  const props: DsrModeContextProviderProps = {
    storage: window.localStorage,
    initTheme,
  };
  return <DsrModeContextProvider {...props}>{children}</DsrModeContextProvider>;
};
```

## With Custom ApplyMode Function

### Description
Allows you to set a custom function to apply the mode in your application. This function will be called each time the mode changes.

### Method
N/A

### Endpoint
N/A

### Code
```javascript
import { DsrModeContextProvider, DsrModeContextProviderProps } from '@desyre/react-mui';

const ModeContextProvider = ({ children }) => {
  const applyMode = (mode: Mode) => {
    console.log(`Mode applied: ${mode}`);
  };
  const props: DsrModeContextProviderProps = {
    storage: window.localStorage,
    applyMode,
  };
  return <DsrModeContextProvider {...props}>{children}</DsrModeContextProvider>;
};
```

## Changing the Mode in Your Application

### Description
The `useModeContext` hook allows you to use and modify the mode context in your application. This hook must be used inside a `DsrModeContextProvider`.

### Method
N/A

### Endpoint
N/A

### Code
```javascript
import { DsrModeContextProvider, DsrModeContextProviderProps, useModeContext } from '@desyre/react-mui';

const InnerComponent = () => {
  const { mode, setMode } = useModeContext();
  return (
    <>
      <p>Mode: {mode}<p>
      <button onClick={() => setMode(mode === 'light' ? 'dark' : 'light')}>Change mode</button>
    </>
  );
};

const OuterComponent = () => {
  const props: DsrModeContextProviderProps = {
    storage: window.localStorage
  };
  return (
    <DsrModeContextProvider {...props}>
      <InnerComponent/>
    </DsrModeContextProvider>
  );
};
```
```

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

### Basic Snackbar Implementation

Source: https://react-desyre.gke2.ope.gcp.renault.com/components-core/snackbars

This example demonstrates a basic implementation of the Desyre Snackbar component, including how to open and close it with custom actions like 'UNDO'. Ensure Mui Theme is installed.

```jsx
import * as React from 'react';
import Button from '@mui/material/Button';
import Snackbar from '@mui/material/Snackbar';
import IconButton from '@mui/material/IconButton';
import CloseIcon from '@mui/icons-material/Close';

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

  const handleClick = () => {
    setOpen(true);
  };

  const handleClose = (event: React.SyntheticEvent | Event, reason?: string) => {
    if (reason === 'clickaway') {
      return;
    }

    setOpen(false);
  };

  const action = (
    <>
      <Button
        variant="text"
        onClick={handleClose}
      >
        UNDO
      </Button>
      <IconButton
        aria-label="close"
        color="inherit"
        onClick={handleClose}
      >
        <CloseIcon fontSize="large" />
      </IconButton>
    </>
  );

  return (
    <>
      <Button onClick={handleClick}>Open Snackbar</Button>
      <Snackbar
        open={open}
        autoHideDuration={6000}
        onClose={handleClose}
        message="Note archived"
        action={action}
      />
    </>
  );
}
```

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

### Basic Card Example

Source: https://react-desyre.gke2.ope.gcp.renault.com/components-core/cards

A basic example of a Material UI Card component with content and an action button. Ensure Material UI theme is installed.

```javascript
import { Card, Stack } from '@mui/material';
import { FrontCarRenault } from '@desyre/icons-react';

export default function DesyreCard() {
  return (
    <Card sx={{ maxWidth: 275 }}>
      <CardContent>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maiores iure temporibus beatae. Alias sint quos ipsa
        mollitia aspernatur amet dolore, quis iure quidem neque unde illum ullam incidunt aliquid dolorem.
      </CardContent>
      <CardActions>
        <Button size="small">Learn More</Button>
      </CardActions>
    </Card>
  );
}

```

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

### Full DsrPagination Example

Source: https://react-desyre.gke2.ope.gcp.renault.com/components-custom/dsr-pagination

Demonstrates a complete DsrPagination setup with items-per-page selector, range indicator, navigation, and page input. Ensure to manage the page and rowsPerPage state using useState.

```javascript
import { DsrPagination, DsrPaginationProps } from '@desyre/react-mui';
import { useState } from 'react';

const Example = () => {
  const [page, setPage] = useState(1);
  const [rowsPerPage, setRowsPerPage] = useState(10);

  const props: DsrPaginationProps = {
    count: 200,
    page,
    onPageChange: (_, nextPage) => setPage(nextPage),
    rowsPerPage,
    onRowsPerPageChange: event => {
      setRowsPerPage(Number(event.target.value));
      setPage(1);
    },
    rowsPerPageOptions: [5, 10, 25],
    showItemsPerPageSelector: true,
    showRangeIndicator: true,
    showPageInputField: true,
    showFirstLastButtons: true,
  };

  return <DsrPagination {...props} />;
};

```

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

### Simple App Bar Usage

Source: https://react-desyre.gke2.ope.gcp.renault.com/components-core/app-bar

A basic example of using the MUI App Bar to display content and navigation elements. Ensure the Mui Theme is installed.

```javascript
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import IconButton from '@mui/material/IconButton';
import MenuIcon from '@mui/icons-material/Menu';

export default function AppBar() {
  return (
    <AppBar position="static">
      <Toolbar>
        <IconButton size="large" edge="start" color="inherit" aria-label="menu" sx={{ mr: 2 }}>
          <MenuIcon />
        </IconButton>
        <div style={{ flexGrow: 1 }}>Add content here</div>
      </Toolbar>
    </AppBar>
  );
}

```

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

### Basic Hyperlink Example

Source: https://react-desyre.gke2.ope.gcp.renault.com/components-core/links

A basic example of how to use the Link component as a hyperlink.

```APIDOC
## Basic Hyperlink

### Description
This example demonstrates a simple hyperlink using the Desyre MUI Link component.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Request Body
N/A (Component Usage)

### Request Example
```jsx
import { Link } from '@mui/material';

function ExampleBasicLink() {
  return (
    <Link href="#" variant="hyperlink">
      Basic Hyperlink
    </Link>
  );
}

export default ExampleBasicLink;
```

### Response
N/A (Component Usage)

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

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

### Installation

Source: https://react-desyre.gke2.ope.gcp.renault.com/components-custom/dsr-mode-switcher

Instructions on how to import the DsrModeSwitcher component and its associated types.

```APIDOC
## Installation

Import the `DsrModeSwitcher` component from `@desyre/react-mui`.

You can also import:
  * the `DsrModeSwitcherProps` interface to define the properties of the `DsrModeSwitcher` component

```typescript
import { DsrModeSwitcher, DsrModeSwitcherProps } from '@desyre/react-mui';
```
```

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

### Radio Group Installation

Source: https://react-desyre.gke2.ope.gcp.renault.com/components-core/radio

Instructions on how to install and import the Desyre MUI Radio component.

```APIDOC
## Installation

### Description
To use the Desyre Radio component, please follow these steps:
1. Check if you have the Mui Theme for your brand. If not, please follow the installation guide to install it.
2. Import the Mui Radio component in your component.

### Steps
1. **Install Mui Theme**: Ensure the Mui Theme for your brand is installed. Refer to the installation guide if needed.
2. **Import Component**: Import `Radio` and `RadioGroup` from '@mui/material/Radio'.

### Code Example
```javascript
import Radio from '@mui/material/Radio';
import RadioGroup from '@mui/material/RadioGroup';
```
```

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

### Install Desyre MUI Icons React

Source: https://react-desyre.gke2.ope.gcp.renault.com/flags

Install the library using npm. This command adds the necessary package to your project for using React icons.

```bash
npm install @desyre/icons-react
```

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

### Primary Label Tabs Example

Source: https://react-desyre.gke2.ope.gcp.renault.com/components-core/tabs

Implements a set of primary tabs with labels. Handles state changes for the active tab. Ensure Mui Theme is installed.

```typescript
import * as React from 'react';
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';
import Box from '@mui/material/Box';

export function DsrPrimaryLabelTabs() {
  const [value, setValue] = React.useState('value1');

  const handleChange = (event: React.SyntheticEvent, newValue: string) => {
    setValue(newValue);
  };

  return (
    <Box sx={{ width: '100%' }}>
      <Tabs value={value} onChange={handleChange} aria-label="primary label tabs example"
        textColor="primary"
        indicatorColor="primary">
        <Tab value="value1" label="Tab One" />
        <Tab value="value2" label="Tab Two" />
        <Tab value="value3" label="Tab Three" />
      </Tabs>
    </Box>
  );
}


```

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

### DsrCodeNavigation Component Usage

Source: https://react-desyre.gke2.ope.gcp.renault.com/components-custom/dsr-code-navigation

Example of how to use the DsrCodeNavigation component with sample files and a preview component.

```APIDOC
## DsrCodeNavigation Component Usage

### Description
This example demonstrates how to integrate the `DsrCodeNavigation` component into your React application. It includes a `HelloWorld` component as a preview and a structured file tree.

### Component
```jsx
import { DsrCodeNavigation } from '@desyre/react-mui';
import type { ReactNode } from 'react';

const HelloWorld = (): ReactNode => {
  return <div>HelloWorld</div>;
};

<DsrCodeNavigation
  title="Test app"
  preview={<HelloWorld />}
  files={[
    {
      name: 'src',
      type: 'folder',
      children: [
        {
          name: 'app',
          type: 'folder',
          children: [
            {
              name: 'file1.txt',
              type: 'file',
              content: '/docs/components/dsr-code-navigation/example.mdx',
            },
            {
              name: 'src',
              type: 'folder',
              children: [
                {
                  name: 'index.tsx',
                  type: 'file',
                  content: '/docs/components/dsr-code-navigation/example2.mdx',
                },
                {
                  name: 'components',
                  type: 'folder',
                  children: [
                    {
                      name: 'Button.tsx',
                      type: 'file',
                      content: '/docs/components/dsr-code-navigation/example3.mdx',
                    },
                  ],
                },
              ],
            },
          ],
        },
      ],
    },
    {
      name: 'public',
      type: 'folder',
      children: [
        {
          name: 'styles.css',
          type: 'file',
          content: '/docs/components/dsr-code-navigation/asset.mdx',
        },
      ],
    },
  ]}
/>;
```

### Installation
Import the `DsrCodeNavigation` component from `@desyre/react-mui`.

```jsx
import { DsrCodeNavigation, type DsrFileTree } from '@desyre/react-mui';
```
```

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

### Arrow Tooltip Example

Source: https://react-desyre.gke2.ope.gcp.renault.com/components-core/tooltips

Shows how to implement a tooltip with an arrow indicator. Requires Button and Tooltip components.

```javascript
import Button from '@mui/material/Button';
import Tooltip from '@mui/material/Tooltip';

export default function ArrowTooltips() {
  return (
    <Tooltip title="Add" arrow>
      <Button>Arrow</Button>
    </Tooltip>
  );
}
```

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

### Desyre Checkbox Installation

Source: https://react-desyre.gke2.ope.gcp.renault.com/components-core/checkbox

Steps to install and import the Desyre Checkbox component.

```APIDOC
## Desyre Checkbox Installation

### Description
To use the Desyre Checkbox component, follow these installation steps:

1.  **Check Mui Theme**: Ensure you have the Mui Theme for your brand. If not, follow the installation guide to install it.
2.  **Import Component**: Import the Mui Checkbox component into your React component.

### Installation Steps

1.  Verify Mui Theme installation.
2.  Import the Checkbox component:

    ```javascript
    import Checkbox from '@mui/material/Checkbox';
    ```
```

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

### Basic Tooltip Example

Source: https://react-desyre.gke2.ope.gcp.renault.com/components-core/tooltips

Demonstrates a basic tooltip implementation. Ensure Material UI icons and Tooltip component are imported.

```javascript
import DeleteIcon from '@mui/icons-material/Delete';
import IconButton from '@mui/material/IconButton';
import Tooltip from '@mui/material/Tooltip';

export default function BasicTooltip() {
  return (
    <Tooltip title="Delete">
      <IconButton>
        <DeleteIcon />
      </IconButton>
    </Tooltip>
  );
}
```

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

### Media Card Example

Source: https://react-desyre.gke2.ope.gcp.renault.com/components-core/cards

An example of a Material UI Card component that includes media, content, and action buttons. Ensure the necessary Material UI components are imported.

```javascript
import Button from '@mui/material/Button';
import Card from '@mui/material/Card';
import CardActions from '@mui/material/CardActions';
import CardContent from '@mui/material/CardContent';
import CardMedia from '@mui/material/CardMedia';

export default function ExampleMediaCard() {
  return (
    <Card sx={{ maxWidth: 345 }}>
      <CardMedia sx={{ height: 140 }} image="https://placehold.co/345x140" title="Placeholder" />
      <CardContent>
        <p>
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Deleniti perspiciatis ratione veritatis possimus,
          doloremque recusandae nam maiores non qui nisi totam repellendus at commodi fugit suscipit ut voluptate
          deserunt cupiditate.
        </p>
      </CardContent>
      <CardActions>
        <Button size="small">Share</Button>
        <Button size="small">Learn More</Button>
      </CardActions>
    </Card>
  );
}

```

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

### Primary Label Tabs with Icon Example

Source: https://react-desyre.gke2.ope.gcp.renault.com/components-core/tabs

Renders primary tabs that include both an icon and a label. Requires custom icon components like Add2, Show, and Delete. Ensure Mui Theme is installed.

```typescript
import * as React from 'react';
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';
import Box from '@mui/material/Box';

export function DsrPrimaryLabelIconTabs() {
  const [value, setValue] = React.useState('value1');

  const handleChange = (event: React.SyntheticEvent, newValue: string) => {
    setValue(newValue);
  };

  return (
    <Box sx={{ width: '100%' }}>
      <Tabs value={value} onChange={handleChange} aria-label="primary icon label tabs example" textColor="primary"
        indicatorColor="primary">
        <Tab icon={<Add2 />} value="value1" label="Tab One" />
        <Tab icon={<Show />} value="value2" label="Tab Two" />
        <Tab icon={<Delete />} value="value3" label="Tab Three" />
      </Tabs>
    </Box>
  );
}


```

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

### Basic Radio Group Example

Source: https://react-desyre.gke2.ope.gcp.renault.com/components-core/radio

Demonstrates a basic row-oriented radio group with options, including disabled and checked states. Ensure Material UI is installed and configured.

```jsx
import Radio from '@mui/material/Radio';
import RadioGroup from '@mui/material/RadioGroup';

<RadioGroup row aria-labelledby="demo-row-radio-buttons-group-label" name="row-radio-buttons-group" defaultValue="a">
  <Radio value="a" name="radio-buttons" inputProps={{ 'aria-label': 'A' }} />
  <Radio value="b" name="radio-buttons" inputProps={{ 'aria-label': 'B' }} />
  <Radio value="c" name="radio-buttons" inputProps={{ 'aria-label': 'C' }} disabled />
  <Radio value="d" name="radio-buttons" inputProps={{ 'aria-label': 'D' }} disabled checked />
</RadioGroup>;
```

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

### Install Desyre React MUI Package

Source: https://react-desyre.gke2.ope.gcp.renault.com/getting-started/installation

Install the @desyre/react-mui package along with its core dependencies using npm. Access to Artifactory is required.

```bash
npm install @desyre/core @desyre/fonts @desyre/icons-react @desyre/react-mui
```

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

### DsrPagination Usage Example

Source: https://react-desyre.gke2.ope.gcp.renault.com/components-custom/dsr-pagination

Example of how to use the DsrPagination component with various configuration options.

```APIDOC
## DsrPagination Usage Example

```jsx
import { DsrPagination, DsrPaginationProps } from '@desyre/react-mui';
import { useState } from 'react';

const Example = () => {
  const [page, setPage] = useState(1);
  const [rowsPerPage, setRowsPerPage] = useState(10);

  const props: DsrPaginationProps = {
    count: 200,
    page,
    onPageChange: (_, nextPage) => setPage(nextPage),
    rowsPerPage,
    onRowsPerPageChange: event => {
      setRowsPerPage(Number(event.target.value));
      setPage(1);
    },
    rowsPerPageOptions: [5, 10, 25],
    showItemsPerPageSelector: true,
    showRangeIndicator: true,
    showPageInputField: true,
    showFirstLastButtons: true,
  };

  return <DsrPagination {...props} />;
};
```
```

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

### Basic Search Bar Implementation

Source: https://react-desyre.gke2.ope.gcp.renault.com/components-core/search

A standalone search bar example with a clear button that appears when input is present.

```typescript
'use client';

import { Cancel } from '@desyre/icons-react';
import { IconButton, InputAdornment } from '@mui/material';
import TextField from '@mui/material/TextField';
import { useState } from 'react';
import { Box } from '@mui/material';

export default function ExampleSearchBar() {
  const [value, setValue] = useState('');

  return (
    <Box sx={{ width: '330px' }}>
      <TextField
        placeholder="Search"
        type="search"
        variant="filled"
        fullWidth
        aria-label="Search field"
        value={value}
        onChange={e => setValue(e.target.value)}
        slotProps={{
          input: {
            endAdornment:
              value.length > 0 ? (
                <InputAdornment position="end">
                  <IconButton aria-label="clear input" onClick={() => setValue('')}>
                    <Cancel />
                  </IconButton>
                </InputAdornment>
              ) : null,
          },
        }}
      />
    </Box>
}
```

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

### Usage

Source: https://react-desyre.gke2.ope.gcp.renault.com/components-custom/dsr-mode-switcher

Example of how to use the DsrModeSwitcher component with the useModeContext hook.

```APIDOC
## Usage

### Basic Usage

The basic usage of the `DsrModeSwitcher` is to use it with the `useModeContext` hook. For more information for the hook, see the DsrModeContextProvider documentation.

This hook allows to retrieve the context of the mode and to switch between light and dark mode.

WCAG compliant

```typescript
import { DsrModeSwitcher, DsrModeSwitcherProps, useModeContext } from '@desyre/react-mui';

const ModeSwitcher = () => {
  const props: DsrModeSwitcherProps = {
    modeContext: useModeContext(),
  };

  return <DsrModeSwitcher {...props} />;
};
```
```

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

### Basic Slider Example

Source: https://react-desyre.gke2.ope.gcp.renault.com/components-core/sliders

A simple example of a Desyre MUI Slider. This slider is WCAG compliant and displays its value.

```javascript
import Box from '@mui/material/Box';
import Slider from '@mui/material/Slider';

export default function SliderSizes() {
  return (
    <Box sx={{ width: 300, paddingBlock: 'var(--dsr-spacing-3xlarge)', paddingInline: 'var(--dsr-spacing-large)' }}>
      <Slider defaultValue={50} aria-label="Default slider" valueLabelDisplay="auto" marks={[{ value: 100 }]} />
    </Box>
  );
}

```

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

### Basic App Bar Example

Source: https://react-desyre.gke2.ope.gcp.renault.com/components-core/app-bar

A standard implementation of the MUI App Bar component, suitable for displaying titles and navigation icons.

```javascript
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import IconButton from '@mui/material/IconButton';
import MenuIcon from '@mui/icons-material/Menu';

export default function AppBar() {
  return (
    <AppBar position="static">
      <Toolbar>
        <IconButton size="large" edge="start" color="inherit" aria-label="menu" sx={{ mr: 2 }}>
          <MenuIcon />
        </IconButton>
        <div style={{ flexGrow: 1 }}>News</div>
      </Toolbar>
    </AppBar>
  );
}

```

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

### Prominent App Bar Example

Source: https://react-desyre.gke2.ope.gcp.renault.com/components-core/app-bar

An example of a prominent MUI App Bar with custom styling for increased height, suitable for more complex layouts. Requires the MUI Theme.

```javascript
import { styled } from '@mui/material/styles';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import IconButton from '@mui/material/IconButton';
import MenuIcon from '@mui/icons-material/Menu';
import SearchIcon from '@mui/icons-material/Search';
import MoreIcon from '@mui/icons-material/MoreVert';

const StyledToolbar = styled(Toolbar)(({ theme }) => ({
  alignItems: 'flex-start',
  paddingTop: theme.spacing(1),
  paddingBottom: theme.spacing(2),
  // Override media queries injected by theme.mixins.toolbar
  '@media all': {
    minHeight: 128,
  },
}));

export default function ProminentAppBar() {
  return (
    <AppBar position="static">
      <StyledToolbar>
        <IconButton size="large" edge="start" color="inherit" aria-label="open drawer" sx={{ mr: 2 }}>
          <MenuIcon />
        </IconButton>
        <div style={{ flexGrow: 1, alignSelf: 'flex-end', flexWrap: 'no-wrap' }}>MUI</div>
        <IconButton size="large" aria-label="search" color="inherit">
          <SearchIcon />
        </IconButton>
        <IconButton size="large" aria-label="display more actions" edge="end" color="inherit">
          <MoreIcon />
        </IconButton>
      </StyledToolbar>
    </AppBar>
  );
}

```

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

### Horizontal Linear Stepper Example

Source: https://react-desyre.gke2.ope.gcp.renault.com/components-core/steppers

This example demonstrates a horizontal linear stepper with optional steps and skip functionality. It requires React and Material-UI components.

```typescript
import * as React from 'react';
import Box from '@mui/material/Box';
import Stepper from '@mui/material/Stepper';
import Step from '@mui/material/Step';
import StepLabel from '@mui/material/StepLabel';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';

const steps = ['Select campaign settings', 'Create an ad group', 'Create an ad'];

export default function DsrHorizontalLinearStepper() {
  const [activeStep, setActiveStep] = React.useState(0);
  const [skipped, setSkipped] = React.useState(new Set<number>());

  const isStepOptional = (step: number) => {
    return step === 1;
  };

  const isStepSkipped = (step: number) => {
    return skipped.has(step);
  };

  const handleNext = () => {
    let newSkipped = skipped;
    if (isStepSkipped(activeStep)) {
      newSkipped = new Set(newSkipped.values());
      newSkipped.delete(activeStep);
    }

    setActiveStep((prevActiveStep) => prevActiveStep + 1);
    setSkipped(newSkipped);
  };

  const handleBack = () => {
    setActiveStep((prevActiveStep) => prevActiveStep - 1);
  };

  const handleSkip = () => {
    if (!isStepOptional(activeStep)) {
      throw new Error("You can't skip a step that isn't optional.");
    }

    setActiveStep((prevActiveStep) => prevActiveStep + 1);
    setSkipped((prevSkipped) => {
      const newSkipped = new Set(prevSkipped.values());
      newSkipped.add(activeStep);
      return newSkipped;
    });
  };

  const handleReset = () => {
    setActiveStep(0);
  };

  return (
    <Box sx={{ width: '100%' }}>
      <Stepper activeStep={activeStep}>
        {steps.map((label, index) => {
          const stepProps: { completed?: boolean } = {};
          const labelProps: {
            optional?: React.ReactNode;
          } = {};
          if (isStepOptional(index)) {
            labelProps.optional = (
              <Typography variant="caption">Optional</Typography>
            );
          }
          if (isStepSkipped(index)) {
            stepProps.completed = false;
          }
          return (
            <Step key={label} {...stepProps}>
              <StepLabel {...labelProps}>{label}</StepLabel>
            </Step>
          );
        })}
      </Stepper>
      {activeStep === steps.length ? (
        <React.Fragment>
          <Typography sx={{ mt: 2, mb: 1 }}>
            All steps completed - you&apos;re finished
          </Typography>
          <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
            <Box sx={{ flex: '1 1 auto' }} />
            <Button onClick={handleReset}>Reset</Button>
          </Box>
        </React.Fragment>
      ) : (
        <React.Fragment>
          <Typography sx={{ mt: 2, mb: 1 }}>Step {activeStep + 1}</Typography>
          <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
            <Button
              color="inherit"
              disabled={activeStep === 0}
              onClick={handleBack}
              sx={{ mr: 1 }}
            >
              Back
            </Button>
            <Box sx={{ flex: '1 1 auto' }} />
            {isStepOptional(activeStep) && (
              <Button color="inherit" onClick={handleSkip} sx={{ mr: 1 }}>
                Skip
              </Button>
            )}
            <Button onClick={handleNext}>
              {activeStep === steps.length - 1 ? 'Finish' : 'Next'}
            </Button>
          </Box>
        </React.Fragment>
      )}
    </Box>
  );
}
```

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

### List with Subheader

Source: https://react-desyre.gke2.ope.gcp.renault.com/components-core/lists

This example shows how to add a subheader to a list, organizing list items under a specific title.

```jsx
        <List
          subheader={
            <ListSubheader component="div" id="nested-list-subheader">
              Settings
            </ListSubheader>
          }
        >
          <ListItem>
            <ListItemText primary="Account settings" secondary="Manage your account preferences" />
          </ListItem>
          <ListItem>
            <ListItemText primary="Privacy settings" secondary="Control your privacy options" />
          </ListItem>
        </List>
```

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

### DsrNavbar Component Overview

Source: https://react-desyre.gke2.ope.gcp.renault.com/components-custom/dsr-navbar

Example showing the structure of menu items with nested children and the component implementation.

```typescript
import { DsrNavbar, DsrNavbarProps } from '@desyre/react-mui';

const props: DsrNavbarProps = {
  menuItems: [
    {
      path: '/components-custom/dsr-navbar',
      label: 'Path 1',
      isActive: false,
      children: [
        {
          path: '/components-custom/dsr-navbar',
          label: 'Path 1.1',
          isActive: false,
        },
        {
          path: '/components-custom/dsr-navbar',
          label: 'Path 1.2',
          isActive: false,
        },
      ],
    },
    { path: '/components-custom/dsr-navbar', label: 'Path 2', isActive: true },
    {
      path: '/components-custom/dsr-navbar',
      label: 'Path 3',
      isActive: false,
      children: [
        {
          path: '/components-custom/dsr-navbar',
          label: 'Path 3.1',
          isActive: false,
        },
        {
          path: '/components-custom/dsr-navbar',
          label: 'Path 3.2',
          isActive: false,
        },
      ],
    },
    { path: '/components-custom/dsr-navbar', label: 'Path 4', isActive: false },
  ],
  allowMultipleExpand: false,
};

<DsrNavbar {...props} />;
```

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

### Install ShadCN UI Dependencies

Source: https://react-desyre.gke2.ope.gcp.renault.com/shadcn

Add these npm packages to your project to use ShadCN UI components. Ensure you have Tailwind CSS v4 and React 19 installed.

```bash
npm install class-variance-authority clsx tailwind-merge lucide-react tw-animate-css

```

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

### DsrFooter Component Usage

Source: https://react-desyre.gke2.ope.gcp.renault.com/components-custom/dsr-footer

Example of how to use the DsrFooter component with its props.

```APIDOC
## DsrFooter Component Usage

### Description
This section shows how to import and use the `DsrFooter` component with its available props.

### Component
`DsrFooter`

### Props
#### DsrFooterProps
- **footerLogoSrc** (string) - Required - The source URL for the footer logo.
- **footerLogoAlt** (string) - Required - The alt text for the footer logo.
- **copyright** (string) - Optional - The copyright text to display.
- **footerText** (string) - Optional - The main footer text content.

### Request Example
```jsx
import { DsrFooter } from '@desyre/react-mui';

<DsrFooter
  footerLogoSrc="/images/logo.svg"
  footerLogoAlt="Logo"
  copyright={`${new Date().getFullYear()}. All rights reserved.`}
  footerText="Your custom footer text goes here."
/>;
```

### Response
This component does not have a direct response in terms of API data, but it renders a footer UI.

#### Success Response (UI Render)
- The component renders a footer with a logo, main content, and copyright notice.

#### Response Example
(UI Rendering - No JSON response)

```

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

### Integrating with Next.js Link and Image

Source: https://react-desyre.gke2.ope.gcp.renault.com/components-custom/dsr-header

Example of wrapping the logo in a Next.js Link and using the Next.js Image component.

```jsx
import Link from 'next/link';
import Image from 'next/image';

<DsrHeader
  logoProps={{
    src: '/images/via-placeholder-com-150.png',
    alt: 'Logo of the company',
  }}
  logoContent={props => (
    <Link href="/">
      <Image src={props.src} alt={props.alt} width={150} height={50} />
    </Link>
  )}
  leftContentProps={{
    projectName: 'Project Name',
  }}
/>;
```

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

### Range Slider Example

Source: https://react-desyre.gke2.ope.gcp.renault.com/components-core/sliders

Demonstrates a range slider for selecting a minimum and maximum value, with both active and disabled versions.

```javascript
import { useCallback, useState } from 'react';
import Box from '@mui/material/Box';
import Slider from '@mui/material/Slider';

function valuetext(value: number) {
  return `${value}°C`;
}

export default function RangeSlider() {
  const startInitValue = 20;
  const endInitValue = 42;
  const [value, setValue] = useState<number[]>([startInitValue, endInitValue]);

  const handleChange = useCallback((_event: Event, newValue: number[]) => {
    setValue(newValue);
  }, []);

  return (
    <Box sx={{ width: '100%' }}>
      <Slider
        aria-label="Temperature range"
        value={value}
        onChange={handleChange}
        valueLabelDisplay="auto"
        getAriaValueText={valuetext}
        marks={[{ value: 0 }, { value: 100 }]} 
      />
      <Slider
        aria-label="Disabled Temperature range"
        value={[startInitValue, endInitValue]}
        valueLabelDisplay="auto"
        getAriaValueText={valuetext}
        marks={[{ value: 0 }, { value: 100 }]} 
        disabled
      />
    </Box>
  );
}

```

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

### Discrete Slider Example

Source: https://react-desyre.gke2.ope.gcp.renault.com/components-core/sliders

Illustrates discrete sliders with custom value formatting and marks. Includes both active and disabled states.

```javascript
import Box from '@mui/material/Box';
import Slider from '@mui/material/Slider';

function valuetext(value: number) {
  return `${value}°C`;
}

export default function DiscreteSlider() {
  return (
    <Box sx={{ width: '100%' }}>
      <Slider
        aria-label="Temperature"
        defaultValue={30}
        getAriaValueText={valuetext}
        valueLabelDisplay="auto"
        shiftStep={30}
        step={10}
        marks
        min={0}
        max={100}
      />
      <Slider defaultValue={30} step={10} marks min={0} max={100} disabled />
    </Box>
  );
}

```

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

### Import MUI Menu Component

Source: https://react-desyre.gke2.ope.gcp.renault.com/components-core/menus

This code shows how to import the MUI Menu component into your project. Ensure you have the Mui Theme installed for your brand.

```javascript
import { Menu } from '@mui/material';
```

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

### Basic Menu Implementation

Source: https://react-desyre.gke2.ope.gcp.renault.com/components-core/menus

This snippet demonstrates a basic implementation of the MUI Menu component, showing how to manage its open/closed state and render menu items. Ensure the Mui Theme is installed and the Menu component is imported.

```javascript
const menuItems = [
  { id: 'menu-item-1', label: 'Menu item 1' },
  { id: 'menu-item-2', label: 'Menu item 2' },
  { id: 'menu-item-3', label: 'Menu item 3' },
];

export default function DsrMenu() {
  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
  const open = Boolean(anchorEl);

  const handleButtonClick = useCallback((event: MouseEvent<HTMLElement>) => {
    setAnchorEl(event.currentTarget);
  }, []);

  const handleClose = useCallback(() => {
    setAnchorEl(null);
  }, []);

  return (
    <div>
      <Button
        id="action-button"
        variant="filled"
        aria-controls={open ? 'menu' : undefined}
        aria-haspopup="true"
        aria-expanded={open ? 'true' : undefined}
        onClick={handleButtonClick}
      >
        Menu
      </Button>
      <Menu
        variant="menu"
        id="menu"
        anchorEl={anchorEl}
        open={open}
        onClose={handleClose}
        slotProps={{
          list: {
            'aria-labelledby': 'action-button',
            role': 'listbox',
          },
        }}
      >
        {menuItems.map(item => (
          <MenuItem key={item.id}>
            <ListItemText>{item.label}</ListItemText>
          </MenuItem>
        ))}
      </Menu>
    </div>
  );
}
```

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

### Initialize DsrModeContextProvider

Source: https://react-desyre.gke2.ope.gcp.renault.com/components-custom/dsr-mode-context-provider

Basic implementation of the context provider wrapping an application component.

```jsx
<DsrModeContextProvider storage={window.localStorage} defaultTheme={'light'}>
  <my-application />
</DsrModeContextProvider>

```

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

### React Chip Component Usage Examples

Source: https://react-desyre.gke2.ope.gcp.renault.com/components-core/chips

Demonstrates how to use the Chip component with different variants and semantic colors. Ensure the component is imported and available in your scope.

```jsx
<Chip variant="filled" color="success" label="Success Chip" />
<Chip variant="outlined" color="warning" label="Warning Chip" />
<Chip variant="elevated" color="info" label="Info Chip" />
```

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

### Component Documentation Template

Source: https://react-desyre.gke2.ope.gcp.renault.com/contributing

Template for the content.mdx file used to document new components in the showcase.

```markdown
# MUI Button with desyre

Mui Button with desyre is a simple MUI Button component with Desyre styles to the button component.

[Mui Documentation for Button](https://mui.com/components/buttons/)

[Figma Design](https://www.figma.com/file/kk2UWOR0pYTea5ERaQ7jqA/%5BM3%2FRG%5D-Material-3-Design-Kit?type=design&node-id=53923-27456&mode=design&t=J5iXi9yK7kwwISPb-4)

## Examples

...
```

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

### Define components.json configuration

Source: https://react-desyre.gke2.ope.gcp.renault.com/shadcn

Sets up the project structure and path aliases for shadcn components.

```json
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "src/styles/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "iconLibrary": "lucide"
}
```

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

### Basic MUI List with Various Items

Source: https://react-desyre.gke2.ope.gcp.renault.com/components-core/lists

Demonstrates a comprehensive list with different item types including text, secondary text, actions, icons, avatars, images, and buttons. Use this for a rich list display.

```javascript
import { ArrowRight2, Download } from '@desyre/icons-react';
import { Avatar, IconButton, ListItemAvatar } from '@mui/material';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import ListSubheader from '@mui/material/ListSubheader';
import Image from 'next/image';

function ExampleSimpleList() {
  return (
    <nav aria-label="main mailbox folders">
      <List
        subheader={
          <ListSubheader component="div" id="simple-list-subheader">
            List Examples
          </ListSubheader>
        }
      >
        <ListItem>
          <ListItemText primary="Simple List Item" />
        </ListItem>
        <ListItem>
          <ListItemText
            primary="List Item Two Lines"
            secondary="Lorem ipsum, dolor sit amet consectetur adipisicing elit. Placeat aspernatur dicta laborum accusamus iusto harum eligendi."
          />
        </ListItem>
        <ListItem>
          <ListItemText
            primary="List Item With Long Secondary Text"
            secondary="Lorem ipsum, dolor sit amet consectetur adipisicing elit. Placeat aspernatur dicta laborum accusamus iusto harum eligendi aliquam excepturi quos modi accusantium tempore provident, dolorem facere officiis alias eum est reiciendis?"
          />
        </ListItem>
        <ListItem
          secondaryAction={
            <IconButton edge="end" aria-label="open">
              <ArrowRight2 />
            </IconButton>
          }
        >
          <ListItemText
            primary="List Item With Long Secondary Text and Action"
            secondary="Lorem ipsum, dolor sit amet consectetur adipisicing elit. Placeat aspernatur dicta laborum accusamus iusto harum eligendi aliquam excepturi quos modi accusantium tempore provident, dolorem facere officiis alias eum est reiciendis?"
          />
        </ListItem>
        <ListItem>
          <ListItemIcon>
            <Download />
          </ListItemIcon>
          <ListItemText
            primary="List Item With Icon"
            secondary="Lorem ipsum, dolor sit amet consectetur adipisicing elit. Placeat aspernatur dicta laborum accusamus iusto harum eligendi."
          />
        </ListItem>
        <ListItem>
          <ListItemAvatar>
            <Avatar>JTR</Avatar>
          </ListItemAvatar>
          <ListItemText
            primary="List Item With Avatar"
            secondary="Lorem ipsum, dolor sit amet consectetur adipisicing elit. Placeat aspernatur dicta laborum accusamus iusto harum eligendi."
          />
        </ListItem>
        <ListItem>
          <Image src="/images/via-placeholder-com-150.png" alt="Placeholder" width={114} height={64} />
          <ListItemText
            primary="List Item With Image"
            secondary="Lorem ipsum, dolor sit amet consectetur adipisicing elit. Placeat aspernatur dicta laborum accusamus iusto harum eligendi."
          />
        </ListItem>
        <ListItem>
          <ListItemButton>
            <ListItemIcon>
              <Download />
            </ListItemIcon>
            <ListItemText primary="List Item With Icon in Button" secondary="lorem ipsum dolor sit amet consectetur" />
          </ListItemButton>
        </ListItem>
        <ListItem>
          <ListItemButton disabled>
            <ListItemIcon>
              <Download />
            </ListItemIcon>
            <ListItemText
              primary="List Item With Icon in Disabled Button"
              secondary="lorem ipsum dolor sit amet consectetur"
            />
          </ListItemButton>
        </ListItem>
      </List>
    </nav>
  );
}

export default ExampleSimpleList;

```

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

### DsrCodeNavigation with File Structure

Source: https://react-desyre.gke2.ope.gcp.renault.com/components-custom/dsr-code-navigation

Demonstrates the DsrCodeNavigation component with a defined file structure for a test application. It includes a preview component and nested files.

```typescript
import { DsrCodeNavigation } from '@desyre/react-mui';

const HelloWorld = (): ReactNode => {
  return <div>HelloWorld</div>;
};

<DsrCodeNavigation
  title="Test app"
  preview={<HelloWorld />}
  files={[
    {
      name: 'src',
      type: 'folder',
      children: [
        {
          name: 'app',
          type: 'folder',
          children: [
            {
              name: 'file1.txt',
              type: 'file',
              content: '/docs/components/dsr-code-navigation/example.mdx',
            },
            {
              name: 'src',
              type: 'folder',
              children: [
                {
                  name: 'index.tsx',
                  type: 'file',
                  content: '/docs/components/dsr-code-navigation/example2.mdx',
                },
                {
                  name: 'components',
                  type: 'folder',
                  children: [
                    {
                      name: 'Button.tsx',
                      type: 'file',
                      content: '/docs/components/dsr-code-navigation/example3.mdx',
                    },
                  ],
                },
              ],
            },
          ],
        },
      ],
    },
    {
      name: 'public',
      type: 'folder',
      children: [
        {
          name: 'styles.css',
          type: 'file',
          content: '/docs/components/dsr-code-navigation/asset.mdx',
        },
      ],
    },
  ]} 
/>;

```

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

### Hyperlink Variant

Source: https://react-desyre.gke2.ope.gcp.renault.com/components-core/links

Example of using the Link component with the 'hyperlink' variant.

```APIDOC
## Hyperlink Variant

### Description
This example shows how to use the Link component with the 'hyperlink' variant, suitable for standard text links.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Request Body
N/A (Component Usage)

### Request Example
```jsx
import { Link } from '@mui/material';

function ExampleLinkHyperlinks() {
  return (
    <>
      <Link href="#" variant="hyperlink">
        Hyperlink
      </Link>
    </>
  );
}

export default ExampleLinkHyperlinks;
```

### Response
N/A (Component Usage)

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

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

### Basic HelloWorld Component

Source: https://react-desyre.gke2.ope.gcp.renault.com/components-custom/dsr-code-navigation

A simple React component that renders 'HelloWorld'. This can be used as a preview component.

```typescript
import type { ReactNode } from 'react';

const HelloWorld = (): ReactNode => {
  return <div>HelloWorld</div>;
};

export default HelloWorld;

```

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

### Basic DsrFooter Usage

Source: https://react-desyre.gke2.ope.gcp.renault.com/components-custom/dsr-footer

Example of how to use the DsrFooter component with basic props like logo source, alt text, copyright, and custom footer text.

```javascript
import { DsrFooter } from '@desyre/react-mui';

<DsrFooter
  footerLogoSrc="/images/logo.svg"
  footerLogoAlt="Logo"
  copyright={`${new Date().getFullYear()}. All rights reserved.`}
  footerText="Your custom footer text goes here."
/>;
```

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

### Implement Hyperlink Variant

Source: https://react-desyre.gke2.ope.gcp.renault.com/components-core/links

Example of using the 'hyperlink' variant within a component.

```javascript
import { Link } from '@mui/material';
import { LinkOut } from '@desyre/icons-react';

function ExampleLinkHyperlinks() {
  return (
    <>
      <Link href="#" variant="hyperlink">
        Hyperlink
      </Link>
    </>
  );
}

export default ExampleLinkVariants;
```

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

### Import Desyre Core Styles

Source: https://react-desyre.gke2.ope.gcp.renault.com/getting-started/installation

Import Desyre core styles, including theme, color channels, and fonts, in your root component. Replace `<brand>` with your specific brand key.

```javascript
import '@desyre/core/dist/themes/<brand>/dsr-theme-<brand>.css';
import '@desyre/core/dist/themes/<brand>/color/color-channel-css-variables-global.css';
import '@desyre/core/dist/themes/<brand>/color/color-channel-css-variables-light.css';
import '@desyre/core/dist/themes/<brand>/color/color-channel-css-variables-dark.css';
import '@desyre/fonts/styles/<brand>-fonts.css';
```

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

### DsrNavbar Installation Imports

Source: https://react-desyre.gke2.ope.gcp.renault.com/components-custom/dsr-navbar

Required imports for the DsrNavbar component and its associated type interfaces.

```typescript
import { DsrNavbar, DsrSidebarProps, DsrSidebarMenuItem } from '@desyre/react-mui';
```