# next-mui-test-lib

> starter project for next js with material ui and dark mode theme

Latest version **1.0.1** (published 2022-07-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install next-mui-test-lib
pnpm add next-mui-test-lib
yarn add next-mui-test-lib
bun add next-mui-test-lib
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2022-07-04 |
| First published | 2022-07-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 11 |
| Unpacked size | 6.5 MB |
| Known vulnerabilities | 0 (+15 in 2 direct dependencies) |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Cheryl Carpenter |
| Maintainers | cheryl2022 |

## Links

- npm: https://www.npmjs.com/package/next-mui-test-lib
- Repository: https://github.com/esharmony/next-mui-darkmode-starter
- Homepage: https://github.com/esharmony/next-mui-darkmode-starter#readme
- Issues: https://github.com/esharmony/next-mui-darkmode-starter/issues
- npm.io page: https://npm.io/package/next-mui-test-lib

## Dependencies (11)

- [next](https://npm.io/package/next.md) ^12.0.4
- [react](https://npm.io/package/react.md) ^17.0.2
- [cookie](https://npm.io/package/cookie.md) ^0.4.1
- [react-dom](https://npm.io/package/react-dom.md) ^17.0.2
- [react-cookie](https://npm.io/package/react-cookie.md) ^4.1.1
- [@mui/material](https://npm.io/package/@mui/material.md) ^5.0.0-rc.1
- [@emotion/cache](https://npm.io/package/@emotion/cache.md) ^11.6.0
- [@emotion/react](https://npm.io/package/@emotion/react.md) ^11.6.0
- [@emotion/server](https://npm.io/package/@emotion/server.md) ^11.4.0
- [@emotion/styled](https://npm.io/package/@emotion/styled.md) ^11.6.0
- [@mui/icons-material](https://npm.io/package/@mui/icons-material.md) ^5.0.0-rc.1

## Recent versions

- 1.0.1 (latest) — 2022-07-04
- 1.0.0 — 2022-07-03

## README

## Next.js MUI 5 Dark Mode Theme Starter Repository

This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).

- You can see a running version [here](https://next-mui-darkmode-starter.vercel.app/) 
- You can see the running storybook [here](https://61aca31959c236004a9851ba-emcwgcpgzl.chromatic.com/) 

you can read a blog post here about [how I set the dark mode up in Storybook](https://www.sabbaticaldev.co.uk/post/configure-dark-mode-in-storybook-with-mui-5-and-nextjs)

Some of the configurations for this project, for prettier and husky etc was written following [this post](https://paulintrognon.fr/blog/typescript-prettier-eslint-next-js) by Paulin Trognon

### The application is set up with the following features.

- Next.js with Typescript 
- Dark theme with Material UI 5 (no dark theme flashing, apart from if it chooses dark mode based on the users system preferences, this will only ever occur once on first load!)
- Storybook with dark theme available globally from the Storybook toolbar
- Storys will have dark theme applied with no extra configuration needed.
- Storyshots (snapshots automatically generated from storybook stories) configured
- Jest configured

## Getting Started

First, run the development server:

```bash

yarn dev
#or
yarn storybook
#or
yarn test

```

To run storybook, you will need to set up your own Storybook on [Chromatic](https://www.chromatic.com/) and add a .env containing CHROMATIC_PROJECT_TOKEN="[yourprojecttoken]"

To run the github hook you will need to add this project token in github to your repository secrets info [here](https://www.chromatic.com/docs/ci)

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

---
_Source: https://npm.io/package/next-mui-test-lib · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._