Initial commit

.eslintignore

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

.eslintrc.js

@@ -0,0 +1,21 @@
+module.exports = {
+  extends: [
+    'mantine',
+    'plugin:@next/next/recommended',
+    'plugin:jest/recommended',
+    'plugin:storybook/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',
+  },
+};

.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

.prettierrc.js

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

.storybook/main.js

@@ -0,0 +1,11 @@
+module.exports = {
+  stories: ['../**/*.story.mdx', '../**/*.story.@(js|jsx|ts|tsx)'],
+  addons: [
+    'storybook-dark-mode',
+    {
+      name: 'storybook-addon-turbo-build',
+      options: { optimizationLevel: 2 },
+    },
+  ],
+  framework: '@storybook/react',
+};

.storybook/preview.tsx

@@ -0,0 +1,22 @@
+import { useDarkMode } from 'storybook-dark-mode';
+import { MantineProvider, ColorSchemeProvider } from '@mantine/core';
+import { NotificationsProvider } from '@mantine/notifications';
+
+export const parameters = { layout: 'fullscreen' };
+
+function ThemeWrapper(props: { children: React.ReactNode }) {
+  const a = 2;
+  return (
+    <ColorSchemeProvider colorScheme="light" toggleColorScheme={() => {}}>
+      <MantineProvider
+        theme={{ colorScheme: useDarkMode() ? 'dark' : 'light' }}
+        withGlobalStyles
+        withNormalizeCSS
+      >
+        <NotificationsProvider>{props.children}</NotificationsProvider>
+      </MantineProvider>
+    </ColorSchemeProvider>
+  );
+}
+
+export const decorators = [(renderStory: Function) => <ThemeWrapper>{renderStory()}</ThemeWrapper>];

README.md

@@ -0,0 +1,39 @@
+# Mantine Next Template
+
+Get started with Mantine + Next with just a few button clicks.
+Click `Use this template` button at the header of repository or [follow this link](https://github.com/mantinedev/mantine-next-template/generate) and
+create new repository with `@mantine` packages. Note that you have to be logged in to GitHub to generate template.
+
+## Features
+
+This template comes with several essential features:
+
+- Server side rendering setup for Mantine
+- Color scheme is stored in cookie to avoid color scheme mismatch after hydration
+- Storybook with color scheme toggle
+- Jest with react testing library
+- 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

components/ColorSchemeToggle/ColorSchemeToggle.tsx

@@ -0,0 +1,26 @@
+import { ActionIcon, Group, useMantineColorScheme } from '@mantine/core';
+import { SunIcon, MoonIcon } from '@modulz/radix-icons';
+
+export function ColorSchemeToggle() {
+  const { colorScheme, toggleColorScheme } = useMantineColorScheme();
+
+  return (
+    <Group position="center" mt="xl">
+      <ActionIcon
+        onClick={() => toggleColorScheme()}
+        size="xl"
+        sx={(theme) => ({
+          backgroundColor:
+            theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],
+          color: theme.colorScheme === 'dark' ? theme.colors.yellow[4] : theme.colors.blue[6],
+        })}
+      >
+        {colorScheme === 'dark' ? (
+          <SunIcon width={20} height={20} />
+        ) : (
+          <MoonIcon width={20} height={20} />
+        )}
+      </ActionIcon>
+    </Group>
+  );
+}

components/Welcome/Welcome.story.tsx

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

components/Welcome/Welcome.styles.ts

@@ -0,0 +1,14 @@
+import { createStyles } from '@mantine/core';
+
+export default createStyles((theme) => ({
+  title: {
+    color: theme.colorScheme === 'dark' ? theme.white : theme.black,
+    fontSize: 100,
+    fontWeight: 900,
+    letterSpacing: -2,
+
+    [theme.fn.smallerThan('md')]: {
+      fontSize: 50,
+    },
+  },
+}));

components/Welcome/Welcome.test.tsx

@@ -0,0 +1,12 @@
+import { render, screen } from '@testing-library/react';
+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/theming/next/'
+    );
+  });
+});

components/Welcome/Welcome.tsx

@@ -0,0 +1,25 @@
+import { Title, Text, Anchor } from '@mantine/core';
+import useStyles from './Welcome.styles';
+
+export function Welcome() {
+  const { classes } = useStyles();
+
+  return (
+    <>
+      <Title className={classes.title} align="center" mt={100}>
+        Welcome to{' '}
+        <Text inherit variant="gradient" component="span">
+          Mantine
+        </Text>
+      </Title>
+      <Text color="dimmed" align="center" size="lg" sx={{ maxWidth: 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/theming/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 @@
+import '@testing-library/jest-dom/extend-expect';

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: true,
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+});

package.json

@@ -0,0 +1,69 @@
+{
+  "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",
+    "typecheck": "tsc --noEmit",
+    "export": "next build && next export",
+    "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": "start-storybook -p 7001",
+    "storybook:build": "build-storybook"
+  },
+  "dependencies": {
+    "@mantine/core": "4.1.3",
+    "@mantine/dates": "4.1.3",
+    "@mantine/hooks": "4.1.3",
+    "@mantine/next": "4.1.3",
+    "@mantine/notifications": "4.1.3",
+    "@mantine/prism": "4.1.3",
+    "@modulz/radix-icons": "^4.0.0",
+    "cookies-next": "^2.0.4",
+    "dayjs": "^1.11.0",
+    "next": "12.1.4",
+    "prism-react-renderer": "^1.3.1",
+    "react": "18.0.0",
+    "react-dom": "18.0.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.17.8",
+    "@next/bundle-analyzer": "^12.1.4",
+    "@next/eslint-plugin-next": "^12.1.4",
+    "@storybook/react": "^6.4.20",
+    "@testing-library/dom": "^8.12.0",
+    "@testing-library/jest-dom": "^5.16.3",
+    "@testing-library/react": "^13.0.0",
+    "@testing-library/user-event": "^14.0.4",
+    "@types/jest": "^27.4.1",
+    "@types/node": "^17.0.23",
+    "@types/react": "17.0.43",
+    "@typescript-eslint/eslint-plugin": "^5.16.0",
+    "@typescript-eslint/parser": "^5.16.0",
+    "babel-loader": "^8.2.4",
+    "eslint": "^8.11.0",
+    "eslint-config-airbnb": "19.0.4",
+    "eslint-config-airbnb-typescript": "^16.1.4",
+    "eslint-config-mantine": "1.1.0",
+    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-jest": "^26.1.3",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-react": "^7.29.4",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "eslint-plugin-storybook": "^0.5.7",
+    "eslint-plugin-testing-library": "^5.2.0",
+    "jest": "^27.5.1",
+    "prettier": "^2.6.2",
+    "storybook-addon-turbo-build": "^1.1.0",
+    "storybook-dark-mode": "^1.0.9",
+    "ts-jest": "^27.1.4",
+    "typescript": "4.6.3"
+  }
+}

pages/_app.tsx

@@ -0,0 +1,40 @@
+import { GetServerSidePropsContext } from 'next';
+import { useState } from 'react';
+import { AppProps } from 'next/app';
+import { getCookie, setCookies } from 'cookies-next';
+import Head from 'next/head';
+import { MantineProvider, ColorScheme, ColorSchemeProvider } from '@mantine/core';
+import { NotificationsProvider } from '@mantine/notifications';
+
+export default function App(props: AppProps & { colorScheme: ColorScheme }) {
+  const { Component, pageProps } = props;
+  const [colorScheme, setColorScheme] = useState<ColorScheme>(props.colorScheme);
+
+  const toggleColorScheme = (value?: ColorScheme) => {
+    const nextColorScheme = value || (colorScheme === 'dark' ? 'light' : 'dark');
+    setColorScheme(nextColorScheme);
+    setCookies('mantine-color-scheme', nextColorScheme, { maxAge: 60 * 60 * 24 * 30 });
+  };
+
+  return (
+    <>
+      <Head>
+        <title>Mantine next example</title>
+        <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
+        <link rel="shortcut icon" href="/favicon.svg" />
+      </Head>
+
+      <ColorSchemeProvider colorScheme={colorScheme} toggleColorScheme={toggleColorScheme}>
+        <MantineProvider theme={{ colorScheme }} withGlobalStyles withNormalizeCSS>
+          <NotificationsProvider>
+            <Component {...pageProps} />
+          </NotificationsProvider>
+        </MantineProvider>
+      </ColorSchemeProvider>
+    </>
+  );
+}
+
+App.getInitialProps = ({ ctx }: { ctx: GetServerSidePropsContext }) => ({
+  colorScheme: getCookie('mantine-color-scheme', ctx) || 'light',
+});

pages/_document.tsx

@@ -0,0 +1,8 @@
+import Document from 'next/document';
+import { createGetInitialProps } from '@mantine/next';
+
+const getInitialProps = createGetInitialProps();
+
+export default class _Document extends Document {
+  static getInitialProps = getInitialProps;
+}

pages/index.tsx

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

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>

tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "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
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}