Update @mantine/* dependencies to 7.12.0

.eslintignore

@@ -1 +1,3 @@
+*.cjs
+*.mjs
 *.js

.github/workflows/npm_test.yml

@@ -0,0 +1,27 @@
+name: npm test
+
+on:
+  pull_request:
+    branches:
+      - '**'
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.number || github.sha }}
+  cancel-in-progress: true
+
+jobs:
+  test_pull_request:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'yarn'
+          cache-dependency-path: '**/yarn.lock'
+      - name: Install dependencies
+        run: yarn
+      - name: Run build
+        run: npm run build
+      - name: Run tests
+        run: npm test

.gitignore

@@ -1,38 +1,132 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+# Logs
-
+logs
-# dependencies
+*.log
-/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*
+lerna-debug.log*
+.pnpm-debug.log*
 
-# local env files
+# Diagnostic reports (https://nodejs.org/api/report.html)
-.env.local
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
 .env.development.local
 .env.test.local
 .env.production.local
+.env.local
 
-# vercel
+# parcel-bundler cache (https://parceljs.org/)
-.vercel
+.cache
-*.tsbuildinfo
+.parcel-cache
 
-# storybook
+# Next.js build output
-storybook-static
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+.DS_Store

.nvmrc

@@ -0,0 +1 @@
+v20.9.0

.storybook/main.ts

@@ -1,10 +1,16 @@
 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'],
+  addons: [
+    '@storybook/addon-essentials',
+    'storybook-dark-mode',
+    '@storybook/addon-styling-webpack',
+  ],
   framework: {
     name: '@storybook/nextjs',
     options: {},
   },
 };
+
 export default config;

.stylelintignore

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

.stylelintrc.json

@@ -0,0 +1,28 @@
+{
+  "extends": ["stylelint-config-standard-scss"],
+  "rules": {
+    "custom-property-pattern": null,
+    "selector-class-pattern": null,
+    "scss/no-duplicate-mixins": null,
+    "declaration-empty-line-before": null,
+    "declaration-block-no-redundant-longhand-properties": null,
+    "alpha-value-notation": null,
+    "custom-property-empty-line-before": null,
+    "property-no-vendor-prefix": null,
+    "color-function-notation": null,
+    "length-zero-no-unit": null,
+    "selector-not-notation": null,
+    "no-descending-specificity": null,
+    "comment-empty-line-before": null,
+    "scss/at-mixin-pattern": null,
+    "scss/at-rule-no-unknown": null,
+    "value-keyword-case": null,
+    "media-feature-range-notation": null,
+    "selector-pseudo-class-no-unknown": [
+      true,
+      {
+        "ignorePseudoClasses": ["global"]
+      }
+    ]
+  }
+}

.yarnrc.yml

@@ -0,0 +1,3 @@
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-4.4.0.cjs

_mantine.scss

@@ -1,52 +0,0 @@
-@use 'sass:math';
-
-// Define variables for your breakpoints,
-// values must be the same as in your theme
-$mantine-breakpoint-xs: '36em';
-$mantine-breakpoint-sm: '48em';
-$mantine-breakpoint-md: '62em';
-$mantine-breakpoint-lg: '75em';
-$mantine-breakpoint-xl: '88em';
-
-@function rem($value) {
-  @return #{math.div(math.div($value, $value * 0 + 1), 16)}rem;
-}
-
-@mixin light {
-  [data-mantine-color-scheme='light'] & {
-    @content;
-  }
-}
-
-@mixin dark {
-  [data-mantine-color-scheme='dark'] & {
-    @content;
-  }
-}
-
-@mixin hover {
-  @media (hover: hover) {
-    &:hover {
-      @content;
-    }
-  }
-
-  @media (hover: none) {
-    &:active {
-      @content;
-    }
-  }
-}
-
-// Add direction mixins if you need rtl support
-@mixin rtl {
-  [dir='rtl'] & {
-    @content;
-  }
-}
-
-@mixin ltr {
-  [dir='ltr'] & {
-    @content;
-  }
-}

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.module.scss

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

components/Welcome/Welcome.tsx

@@ -1,5 +1,5 @@
 import { Title, Text, Anchor } from '@mantine/core';
-import classes from './Welcome.module.scss';
+import classes from './Welcome.module.css';
 
 export function Welcome() {
   return (

jest.config.cjs

@@ -5,7 +5,7 @@ const createJestConfig = nextJest({
 });
 
 const customJestConfig = {
-  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.cjs'],
   moduleNameMapper: {
     '^@/components/(.*)$': '<rootDir>/components/$1',
     '^@/pages/(.*)$': '<rootDir>/pages/$1',

jest.setup.cjs

@@ -1,7 +1,8 @@
-import '@testing-library/jest-dom/extend-expect';
+require('@testing-library/jest-dom');
 
 const { getComputedStyle } = window;
 window.getComputedStyle = (elt) => getComputedStyle(elt);
+window.HTMLElement.prototype.scrollIntoView = () => {};
 
 Object.defineProperty(window, 'matchMedia', {
   writable: true,

next.config.mjs

@@ -1,8 +1,10 @@
-const withBundleAnalyzer = require('@next/bundle-analyzer')({
+import bundleAnalyzer from '@next/bundle-analyzer';
+
+const withBundleAnalyzer = bundleAnalyzer({
   enabled: process.env.ANALYZE === 'true',
 });
 
-module.exports = withBundleAnalyzer({
+export default withBundleAnalyzer({
   reactStrictMode: false,
   eslint: {
     ignoreDuringBuilds: true,
@@ -10,8 +12,4 @@ module.exports = withBundleAnalyzer({
   experimental: {
     optimizePackageImports: ['@mantine/core', '@mantine/hooks'],
   },
-
-  sassOptions: {
-    prependData: `@import "./_mantine.scss";`,
-  },
 });

package.json

@@ -8,7 +8,8 @@
     "analyze": "ANALYZE=true next build",
     "start": "next start",
     "typecheck": "tsc --noEmit",
-    "lint": "next lint",
+    "lint": "next lint && npm run lint:stylelint",
+    "lint:stylelint": "stylelint '**/*.css' --cache",
     "jest": "jest",
     "jest:watch": "jest --watch",
     "prettier:check": "prettier --check \"**/*.{ts,tsx}\"",
@@ -18,52 +19,54 @@
     "storybook:build": "storybook build"
   },
   "dependencies": {
-    "@mantine/core": "7.1.3",
+    "@mantine/core": "7.12.0",
-    "@mantine/hooks": "7.1.3",
+    "@mantine/hooks": "7.12.0",
-    "@next/bundle-analyzer": "^13.5.3",
+    "@next/bundle-analyzer": "^14.2.4",
-    "@tabler/icons-react": "^2.20.0",
+    "@tabler/icons-react": "^3.6.0",
-    "next": "13.5.3",
+    "next": "14.2.4",
-    "react": "18.2.0",
+    "react": "18.3.1",
-    "react-dom": "18.2.0"
+    "react-dom": "18.3.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.1",
+    "@babel/core": "^7.24.7",
-    "@next/eslint-plugin-next": "^13.5.3",
+    "@next/eslint-plugin-next": "^14.2.4",
-    "@storybook/addon-essentials": "^7.4.3",
+    "@storybook/addon-essentials": "^8.1.10",
-    "@storybook/addon-styling": "^1.0.8",
+    "@storybook/addon-styling-webpack": "^1.0.0",
-    "@storybook/blocks": "^7.4.3",
+    "@storybook/blocks": "^8.1.10",
-    "@storybook/nextjs": "^7.4.3",
+    "@storybook/nextjs": "^8.1.10",
-    "@storybook/react": "^7.4.3",
+    "@storybook/react": "^8.1.10",
-    "@testing-library/dom": "^9.3.0",
+    "@testing-library/dom": "^10.1.0",
-    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/jest-dom": "^6.4.6",
-    "@testing-library/react": "^14.0.0",
+    "@testing-library/react": "^16.0.0",
-    "@testing-library/user-event": "^14.4.3",
+    "@testing-library/user-event": "^14.5.2",
-    "@types/jest": "^29.5.1",
+    "@types/jest": "^29.5.12",
-    "@types/node": "^20.2.5",
+    "@types/node": "^20.14.8",
-    "@types/react": "18.2.7",
+    "@types/react": "18.3.3",
-    "@typescript-eslint/eslint-plugin": "^5.59.7",
+    "@typescript-eslint/eslint-plugin": "^7.13.1",
-    "@typescript-eslint/parser": "^5.59.7",
+    "@typescript-eslint/parser": "^7.13.1",
-    "babel-loader": "^9.1.2",
+    "babel-loader": "^9.1.3",
-    "eslint": "^8.41.0",
+    "eslint": "^8.57.0",
     "eslint-config-airbnb": "19.0.4",
-    "eslint-config-airbnb-typescript": "^17.0.0",
+    "eslint-config-airbnb-typescript": "^18.0.0",
-    "eslint-config-mantine": "2.0.0",
+    "eslint-config-mantine": "3.2.0",
-    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jest": "^27.2.1",
+    "eslint-plugin-jest": "^28.6.0",
-    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-jsx-a11y": "^6.9.0",
-    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react": "^7.34.3",
-    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-testing-library": "^5.11.0",
+    "eslint-plugin-testing-library": "^6.2.2",
-    "jest": "^29.5.0",
+    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.5.0",
+    "jest-environment-jsdom": "^29.7.0",
-    "postcss": "^8.4.23",
+    "postcss": "^8.4.38",
-    "postcss-preset-mantine": "1.8.0",
+    "postcss-preset-mantine": "1.17.0",
     "postcss-simple-vars": "^7.0.1",
-    "prettier": "^2.8.8",
+    "prettier": "^3.3.2",
-    "sass": "^1.69.3",
+    "storybook": "^8.1.10",
-    "storybook": "^7.4.3",
+    "storybook-dark-mode": "^4.0.2",
-    "storybook-dark-mode": "^3.0.0",
+    "stylelint": "^16.6.1",
-    "ts-jest": "^29.1.0",
+    "stylelint-config-standard-scss": "^13.1.0",
-    "typescript": "5.2.2"
+    "ts-jest": "^29.1.5",
-  }
+    "typescript": "5.5.2"
+  },
+  "packageManager": "yarn@4.4.0"
 }

tsconfig.json

@@ -1,11 +1,8 @@
 {
   "compilerOptions": {
+    "types": ["node", "jest", "@testing-library/jest-dom"],
     "target": "es5",
-    "lib": [
+    "lib": ["dom", "dom.iterable", "esnext"],
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -19,23 +16,10 @@
     "jsx": "preserve",
     "incremental": true,
     "paths": {
-      "@/*": [
+      "@/*": ["./*"]
-        "./*"
-      ]
     },
-    "plugins": [
+    "plugins": [{ "name": "next" }]
-      {
-        "name": "next"
-      }
-    ]
   },
-  "include": [
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-    "next-env.d.ts",
+  "exclude": ["node_modules"]
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
 }