Init template

.eslintignore

@@ -0,0 +1 @@
+*.js

.eslintrc.js

@@ -0,0 +1,17 @@
+module.exports = {
+  extends: ['mantine', 'plugin:@next/next/recommended', 'plugin:jest/recommended'],
+  plugins: ['testing-library', 'jest'],
+  overrides: [
+    {
+      files: ['**/?(*.)+(spec|test).[jt]s?(x)'],
+      extends: ['plugin:testing-library/react'],
+    },
+  ],
+  parserOptions: {
+    project: './tsconfig.json',
+  },
+  rules: {
+    'react/react-in-jsx-scope': 'off',
+    'import/extensions': 'off',
+  },
+};

.gitignore

@@ -0,0 +1,38 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
+*.tsbuildinfo
+
+# storybook
+storybook-static

.prettierignore

@@ -0,0 +1 @@
+.next

.prettierrc.js

@@ -0,0 +1 @@
+module.exports = require('eslint-config-mantine/.prettierrc.js');

.storybook/main.ts

@@ -0,0 +1,10 @@
+import type { StorybookConfig } from '@storybook/nextjs';
+const config: StorybookConfig = {
+  stories: ['../components/**/*.(stories|story).@(js|jsx|ts|tsx)'],
+  addons: ['@storybook/addon-essentials', 'storybook-dark-mode', '@storybook/addon-styling'],
+  framework: {
+    name: '@storybook/nextjs',
+    options: {},
+  },
+};
+export default config;

.storybook/preview.tsx

@@ -0,0 +1,25 @@
+import '@mantine/core/styles.css';
+import React, { useEffect } from 'react';
+import { addons } from '@storybook/preview-api';
+import { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode';
+import { MantineProvider, useMantineColorScheme } from '@mantine/core';
+import { theme } from '../theme';
+
+const channel = addons.getChannel();
+
+function ColorSchemeWrapper({ children }: { children: React.ReactNode }) {
+  const { setColorScheme } = useMantineColorScheme();
+  const handleColorScheme = (value: boolean) => setColorScheme(value ? 'dark' : 'light');
+
+  useEffect(() => {
+    channel.on(DARK_MODE_EVENT_NAME, handleColorScheme);
+    return () => channel.off(DARK_MODE_EVENT_NAME, handleColorScheme);
+  }, [channel]);
+
+  return <>{children}</>;
+}
+
+export const decorators = [
+  (renderStory: any) => <ColorSchemeWrapper>{renderStory()}</ColorSchemeWrapper>,
+  (renderStory: any) => <MantineProvider theme={theme}>{renderStory()}</MantineProvider>,
+];

LICENCE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Vitaly Rtischev
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,38 @@
+# Mantine Next.js template
+
+This is a template for [Next.js](https://nextjs.org/) pages router + [Mantine](https://mantine.dev/).
+If you want to use app router instead, see [next-app-template](https://github.com/mantinedev/next-app-template).
+
+## Features
+
+This template comes with the following features:
+
+- [PostCSS](https://postcss.org/) with [mantine-postcss-preset](https://mantine.dev/styles/postcss-preset)
+- [TypeScript](https://www.typescriptlang.org/)
+- [Storybook](https://storybook.js.org/)
+- [Jest](https://jestjs.io/) setup with [React Testing Library](https://testing-library.com/docs/react-testing-library/intro)
+- ESLint setup with [eslint-config-mantine](https://github.com/mantinedev/eslint-config-mantine)
+
+## npm scripts
+
+### Build and dev scripts
+
+- `dev` – start dev server
+- `build` – bundle application for production
+- `export` – exports static website to `out` folder
+- `analyze` – analyzes application bundle with [@next/bundle-analyzer](https://www.npmjs.com/package/@next/bundle-analyzer)
+
+### Testing scripts
+
+- `typecheck` – checks TypeScript types
+- `lint` – runs ESLint
+- `prettier:check` – checks files with Prettier
+- `jest` – runs jest tests
+- `jest:watch` – starts jest watch
+- `test` – runs `jest`, `prettier:check`, `lint` and `typecheck` scripts
+
+### Other scripts
+
+- `storybook` – starts storybook dev server
+- `storybook:build` – build production storybook bundle to `storybook-static`
+- `prettier:write` – formats all files with Prettier

app/layout.tsx

@@ -0,0 +1,22 @@
+import '@mantine/core/styles.css';
+import React from 'react';
+import { MantineProvider, ColorSchemeScript } from '@mantine/core';
+
+export const metadata = {
+  title: 'Mantine Next.js template',
+  description: 'I am using Mantine with Next.js!',
+};
+
+export default function RootLayout({ children }: { children: any }) {
+  return (
+    <html lang="en">
+      <head>
+        <ColorSchemeScript />
+        <link rel="shortcut icon" href="/favicon.svg" />
+      </head>
+      <body>
+        <MantineProvider>{children}</MantineProvider>
+      </body>
+    </html>
+  );
+}

app/page.tsx

@@ -0,0 +1,11 @@
+import { Welcome } from '../components/Welcome/Welcome';
+import { ColorSchemeToggle } from '../components/ColorSchemeToggle/ColorSchemeToggle';
+
+export default function HomePage() {
+  return (
+    <>
+      <Welcome />
+      <ColorSchemeToggle />
+    </>
+  );
+}

components/ColorSchemeToggle/ColorSchemeToggle.tsx

@@ -0,0 +1,15 @@
+'use client';
+
+import { Button, Group, useMantineColorScheme } from '@mantine/core';
+
+export function ColorSchemeToggle() {
+  const { setColorScheme } = useMantineColorScheme();
+
+  return (
+    <Group justify="center" mt="xl">
+      <Button onClick={() => setColorScheme('light')}>Light</Button>
+      <Button onClick={() => setColorScheme('dark')}>Dark</Button>
+      <Button onClick={() => setColorScheme('auto')}>Auto</Button>
+    </Group>
+  );
+}

components/Welcome/Welcome.module.css

@@ -0,0 +1,10 @@
+.title {
+  color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
+  font-size: rem(100px);
+  font-weight: 900;
+  letter-spacing: rem(-2px);
+
+  @media (max-width: $mantine-breakpoint-md) {
+    font-size: rem(50px);
+  }
+}

components/Welcome/Welcome.story.tsx

@@ -0,0 +1,7 @@
+import { Welcome } from './Welcome';
+
+export default {
+  title: 'Welcome',
+};
+
+export const Usage = () => <Welcome />;

components/Welcome/Welcome.test.tsx

@@ -0,0 +1,12 @@
+import { render, screen } from '@/test-utils';
+import { Welcome } from './Welcome';
+
+describe('Welcome component', () => {
+  it('has correct Next.js theming section link', () => {
+    render(<Welcome />);
+    expect(screen.getByText('this guide')).toHaveAttribute(
+      'href',
+      'https://mantine.dev/guides/next/'
+    );
+  });
+});

components/Welcome/Welcome.tsx

@@ -0,0 +1,23 @@
+import { Title, Text, Anchor } from '@mantine/core';
+import classes from './Welcome.module.css';
+
+export function Welcome() {
+  return (
+    <>
+      <Title className={classes.title} ta="center" mt={100}>
+        Welcome to{' '}
+        <Text inherit variant="gradient" component="span" gradient={{ from: 'pink', to: 'yellow' }}>
+          Mantine
+        </Text>
+      </Title>
+      <Text color="dimmed" ta="center" size="lg" maw={580} mx="auto" mt="xl">
+        This starter Next.js project includes a minimal setup for server side rendering, if you want
+        to learn more on Mantine + Next.js integration follow{' '}
+        <Anchor href="https://mantine.dev/guides/next/" size="lg">
+          this guide
+        </Anchor>
+        . To get started edit index.tsx file.
+      </Text>
+    </>
+  );
+}

jest.config.js

@@ -0,0 +1,16 @@
+const nextJest = require('next/jest');
+
+const createJestConfig = nextJest({
+  dir: './',
+});
+
+const customJestConfig = {
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+  moduleNameMapper: {
+    '^@/components/(.*)$': '<rootDir>/components/$1',
+    '^@/pages/(.*)$': '<rootDir>/pages/$1',
+  },
+  testEnvironment: 'jest-environment-jsdom',
+};
+
+module.exports = createJestConfig(customJestConfig);

jest.setup.js

@@ -0,0 +1,26 @@
+import '@testing-library/jest-dom/extend-expect';
+
+const { getComputedStyle } = window;
+window.getComputedStyle = (elt) => getComputedStyle(elt);
+
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation((query) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(),
+    removeListener: jest.fn(),
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});
+
+class ResizeObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}
+
+window.ResizeObserver = ResizeObserver;

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

next.config.js

@@ -0,0 +1,10 @@
+const withBundleAnalyzer = require('@next/bundle-analyzer')({
+  enabled: process.env.ANALYZE === 'true',
+});
+
+module.exports = withBundleAnalyzer({
+  reactStrictMode: false,
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+});

package.json

@@ -0,0 +1,71 @@
+{
+  "name": "mantine-next-template",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "analyze": "ANALYZE=true next build",
+    "start": "next start",
+    "export": "next build && next export",
+    "typecheck": "tsc --noEmit",
+    "lint": "next lint",
+    "jest": "jest",
+    "jest:watch": "jest --watch",
+    "prettier:check": "prettier --check \"**/*.{ts,tsx}\"",
+    "prettier:write": "prettier --write \"**/*.{ts,tsx}\"",
+    "test": "npm run prettier:check && npm run lint && npm run typecheck && npm run jest",
+    "storybook": "storybook dev -p 6006",
+    "storybook:build": "storybook build"
+  },
+  "dependencies": {
+    "@mantine/core": "7.0.0-alpha.11",
+    "@mantine/hooks": "7.0.0-alpha.11",
+    "@next/bundle-analyzer": "^13.4.4",
+    "@tabler/icons-react": "^2.20.0",
+    "cookies-next": "^2.1.1",
+    "next": "13.4.4",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.22.1",
+    "@next/eslint-plugin-next": "^13.4.4",
+    "@storybook/addon-essentials": "^7.0.18",
+    "@storybook/addon-styling": "^1.0.8",
+    "@storybook/blocks": "^7.0.18",
+    "@storybook/nextjs": "^7.0.18",
+    "@storybook/react": "^7.0.18",
+    "@storybook/testing-library": "^0.1.0",
+    "@testing-library/dom": "^9.3.0",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/jest": "^29.5.1",
+    "@types/node": "^20.2.5",
+    "@types/react": "18.2.7",
+    "@typescript-eslint/eslint-plugin": "^5.59.7",
+    "@typescript-eslint/parser": "^5.59.7",
+    "babel-loader": "^9.1.2",
+    "eslint": "^8.41.0",
+    "eslint-config-airbnb": "19.0.4",
+    "eslint-config-airbnb-typescript": "^17.0.0",
+    "eslint-config-mantine": "2.0.0",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-jest": "^27.2.1",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-testing-library": "^5.11.0",
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.5.0",
+    "postcss": "^8.4.23",
+    "postcss-preset-mantine": "^1.3.0",
+    "postcss-simple-vars": "^7.0.1",
+    "prettier": "^2.8.8",
+    "storybook": "^7.0.18",
+    "storybook-dark-mode": "^3.0.0",
+    "ts-jest": "^29.1.0",
+    "typescript": "5.0.4"
+  }
+}

postcss.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+  plugins: {
+    'postcss-preset-mantine': {},
+    'postcss-simple-vars': {
+      variables: {
+        'mantine-breakpoint-xs': '36em',
+        'mantine-breakpoint-sm': '48em',
+        'mantine-breakpoint-md': '62em',
+        'mantine-breakpoint-lg': '75em',
+        'mantine-breakpoint-xl': '88em',
+      },
+    },
+  },
+};

public/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"><g fill="none" fill-rule="evenodd"><rect width="500" height="500" fill="#339AF0" rx="250"/><g fill="#FFF"><path fill-rule="nonzero" d="M202.055 135.706c-6.26 8.373-4.494 20.208 3.944 26.42 29.122 21.45 45.824 54.253 45.824 90.005 0 35.752-16.702 68.559-45.824 90.005-8.436 6.215-10.206 18.043-3.944 26.42 6.26 8.378 18.173 10.13 26.611 3.916a153.835 153.835 0 0024.509-22.54h53.93c10.506 0 19.023-8.455 19.023-18.885 0-10.43-8.517-18.886-19.023-18.886h-29.79c8.196-18.594 12.553-38.923 12.553-60.03s-4.357-41.436-12.552-60.03h29.79c10.505 0 19.022-8.455 19.022-18.885 0-10.43-8.517-18.886-19.023-18.886h-53.93a153.835 153.835 0 00-24.509-22.54c-8.438-6.215-20.351-4.46-26.61 3.916z"/><path d="M171.992 246.492c0-15.572 12.624-28.195 28.196-28.195 15.572 0 28.195 12.623 28.195 28.195 0 15.572-12.623 28.196-28.195 28.196-15.572 0-28.196-12.624-28.196-28.196z"/></g></g></svg>

test-utils/index.ts

@@ -0,0 +1,5 @@
+import userEvent from '@testing-library/user-event';
+
+export * from '@testing-library/react';
+export { render } from './render';
+export { userEvent };

test-utils/render.tsx

@@ -0,0 +1,11 @@
+import { render as testingLibraryRender } from '@testing-library/react';
+import { MantineProvider } from '@mantine/core';
+import { theme } from '../theme';
+
+export function render(ui: React.ReactNode) {
+  return testingLibraryRender(<>{ui}</>, {
+    wrapper: ({ children }: { children: React.ReactNode }) => (
+      <MantineProvider theme={theme}>{children}</MantineProvider>
+    ),
+  });
+}

theme.ts

@@ -0,0 +1,5 @@
+import { createTheme } from '@mantine/core';
+
+export const theme = createTheme({
+  /* Put your mantine theme override here */
+});

tsconfig.json

@@ -0,0 +1,41 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    },
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}