import {Canvas, Meta, Story} from '@storybook/addon-docs';

<Meta title="mui-utils / Info"/>

# mui-utils
Utils like providers, hooks fort functionality which is reusable across apps.

## [Changelog](https://github.com/dreipol/t3-ui-lib/blob/main/packages/mui-utils/CHANGELOG.md)

## Install
`npm install @dreipol/t3-mui-utils`

## Utils
- ✅ = Ready
- 🕐 = Planned
- 🔨 = Building

Name | Status | Description
---|---|---
[MuiCssVars](/story/mui-utils-utils-css-vars--page) | ✅ | Make all MUI theme variables available as CSS variables


## Components
- ✅ = Ready
- 🕐 = Planned
- 🔨 = Building

Name | Status | Description
---|---|---
[StyColors](/story/mui-utils-components-styleguide--colors) | ✅ | List of default MUI theme colors
[StyTypos](/story/mui-utils-components-styleguide--typography) | ✅ | List of default MUI typos
[StyElevations](/story/mui-utils-components-styleguide--shadows) | ✅ | List of default MUI shadows


### Usage
Template to create a short Styleguide page in a MUI project

```tsx
export default {
    title: 'Styleguide',
}

export const Colors = () => {
    const theme = createTheme();
    return <ThemeProvider theme={ theme }>
        <StyColors/>
    </ThemeProvider>
}

export const Typography = () => {
    const theme = createTheme();
    return <ThemeProvider theme={ theme }>
        <StyTypos/>
    </ThemeProvider>
}

export const Shadows = () => {
    const theme = createTheme();
    return <ThemeProvider theme={ theme }>
        <StyElevations/>
    </ThemeProvider>
}
```

#### Add Custom colors

```tsx
export const Colors = () => {
    const theme = createTheme();
    return <ThemeProvider theme={ theme }>
        <StyColors>
            <StyColorGroup title="Misc" cols={ 4 }>
                <StyColorDisplay name={ `theme.palette.divider` } colorCode={ theme.palette.divider }/>
                <StyColorDisplay name={ `theme.palette.background.paper` } colorCode={ theme.palette.background.paper }/>
                <StyColorDisplay name={ `theme.palette.background.default` }
                    colorCode={ theme.palette.background.default }/>
            </StyColorGroup>
        </StyColors>
    </ThemeProvider>
}
```

### Use components with NextJS
Due to limitations of webpack some components do not work when server side rendered.
For example `MuiCssVars` won't work serverside since it accesses the `document` object.
Therefore we can use dynamic imports from nextjs

From this

```tsx
// ./pages/_app.tsx
import { MuiCssVars } from "@dreipol/t3-mui-utils";

export default function App({ Component, pageProps }: AppProps) {
    return <>
        <ThemeProvider theme={ getTheme() }>
            <LocalizationProvider dateAdapter={ AdapterDateFns }>
                <StyledEngineProvider injectFirst>
                    <MuiCssVars/>
                    <Component { ...pageProps } />
                </StyledEngineProvider>
            </LocalizationProvider>
        </ThemeProvider>
    </>
}
```

to this

```tsx
// ./pages/_app.tsx
import dynamic from "next/dynamic";

const MuiCssVarsNoSSR = dynamic(() => import('../src/theme/css-vars'), { ssr: false })

export default function App({ Component, pageProps }: AppProps) {
    return <>
        <ThemeProvider theme={ getTheme() }>
            <LocalizationProvider dateAdapter={ AdapterDateFns }>
                <StyledEngineProvider injectFirst>
                    <MuiCssVarsNoSSR/>
                    <Component { ...pageProps } />
                </StyledEngineProvider>
            </LocalizationProvider>
        </ThemeProvider>
    </>
}
```

```tsx
// ./src/theme/css-vars.tsx
import { MuiCssVars } from "@dreipol/t3-mui-utils";

export const CssVars = () => {
    return <MuiCssVars/>
}

export default CssVars;
```