Update sass example

.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',
+  },
+};

.github/workflows/npm_test.yml

@@ -1,27 +0,0 @@
-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@v5
-      - uses: actions/setup-node@v6
-        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,133 +1,38 @@
-# Logs
-logs
-*.log
+# 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*
-lerna-debug.log*
-.pnpm-debug.log*
 
-# Diagnostic reports (https://nodejs.org/api/report.html)
-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
+# local env files
+.env.local
 .env.development.local
 .env.test.local
 .env.production.local
-.env.local
 
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-.parcel-cache
+# vercel
+.vercel
+*.tsbuildinfo
 
-# Next.js build output
-.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
-next-env.d.ts
+# storybook
+storybook-static

.nvmrc

@@ -1 +0,0 @@
-24.11.0

.prettierignore

@@ -1,2 +1 @@
-.next
-next-env.d.ts
+.next

.prettierrc.js

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

.prettierrc.mjs

@@ -1,35 +0,0 @@
-/** @type {import("@ianvs/prettier-plugin-sort-imports").PrettierConfig} */
-const config = {
-  printWidth: 100,
-  singleQuote: true,
-  trailingComma: 'es5',
-  plugins: ['@ianvs/prettier-plugin-sort-imports'],
-  importOrder: [
-    '.*styles.css$',
-    '',
-    'dayjs',
-    '^react$',
-    '^next$',
-    '^next/.*$',
-    '<BUILTIN_MODULES>',
-    '<THIRD_PARTY_MODULES>',
-    '^@mantine/(.*)$',
-    '^@mantinex/(.*)$',
-    '^@mantine-tests/(.*)$',
-    '^@docs/(.*)$',
-    '^@/.*$',
-    '^../(?!.*.css$).*$',
-    '^./(?!.*.css$).*$',
-    '\\.css$',
-  ],
-  overrides: [
-    {
-      files: '*.mdx',
-      options: {
-        printWidth: 70,
-      },
-    },
-  ],
-};
-
-export default config;

.storybook/main.ts

@@ -1,13 +1,7 @@
 import type { StorybookConfig } from '@storybook/nextjs';
-
 const config: StorybookConfig = {
-  core: {
-    disableWhatsNewNotifications: true,
-    disableTelemetry: true,
-    enableCrashReports: false,
-  },
   stories: ['../components/**/*.(stories|story).@(js|jsx|ts|tsx)'],
-  addons: ['@storybook/addon-themes'],
+  addons: ['@storybook/addon-essentials', 'storybook-dark-mode', '@storybook/addon-styling'],
   framework: {
     name: '@storybook/nextjs',
     options: {},

.storybook/preview.tsx

@@ -1,41 +1,25 @@
 import '@mantine/core/styles.css';
-
-import { ColorSchemeScript, MantineProvider } from '@mantine/core';
+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';
 
-export const parameters = {
-  layout: 'fullscreen',
-  options: {
-    showPanel: false,
-    // @ts-expect-error – storybook throws build error for (a: any, b: any)
-    storySort: (a, b) => a.title.localeCompare(b.title, undefined, { numeric: true }),
-  },
-  backgrounds: { disable: true },
-};
+const channel = addons.getChannel();
 
-export const globalTypes = {
-  theme: {
-    name: 'Theme',
-    description: 'Mantine color scheme',
-    defaultValue: 'light',
-    toolbar: {
-      icon: 'mirror',
-      items: [
-        { value: 'light', title: 'Light' },
-        { value: 'dark', title: 'Dark' },
-      ],
-    },
-  },
-};
+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, context: any) => {
-    const scheme = (context.globals.theme || 'light') as 'light' | 'dark';
-    return (
-      <MantineProvider theme={theme} forceColorScheme={scheme}>
-        <ColorSchemeScript />
-        {renderStory()}
-      </MantineProvider>
-    );
-  },
+  (renderStory: any) => <ColorSchemeWrapper>{renderStory()}</ColorSchemeWrapper>,
+  (renderStory: any) => <MantineProvider theme={theme}>{renderStory()}</MantineProvider>,
 ];

.stylelintignore

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

.stylelintrc.json

@@ -1,28 +0,0 @@
-{
-  "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

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

_mantine.scss

@@ -0,0 +1,52 @@
+@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;
+  }
+}

app/layout.tsx

@@ -1,7 +1,6 @@
 import '@mantine/core/styles.css';
-
 import React from 'react';
-import { ColorSchemeScript, mantineHtmlProps, MantineProvider } from '@mantine/core';
+import { MantineProvider, ColorSchemeScript } from '@mantine/core';
 import { theme } from '../theme';
 
 export const metadata = {
@@ -11,7 +10,7 @@ export const metadata = {
 
 export default function RootLayout({ children }: { children: any }) {
   return (
-    <html lang="en" {...mantineHtmlProps}>
+    <html lang="en">
       <head>
         <ColorSchemeScript />
         <link rel="shortcut icon" href="/favicon.svg" />

app/page.tsx

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

components/Welcome/Welcome.module.css

@@ -1,10 +0,0 @@
-.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

@@ -0,0 +1,18 @@
+.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 { Anchor, Text, Title } from '@mantine/core';
-import classes from './Welcome.module.css';
+import { Title, Text, Anchor } from '@mantine/core';
+import classes from './Welcome.module.scss';
 
 export function Welcome() {
   return (

eslint.config.mjs

@@ -1,22 +0,0 @@
-import mantine from 'eslint-config-mantine';
-import { defineConfig } from 'eslint/config';
-import tseslint from 'typescript-eslint';
-
-// @ts-check
-export default defineConfig(
-  tseslint.configs.recommended,
-  ...mantine,
-  { ignores: ['**/*.{mjs,cjs,js,d.ts,d.mts}', '.next'] },
-  {
-    files: ['**/*.story.tsx'],
-    rules: { 'no-console': 'off' },
-  },
-  {
-    languageOptions: {
-      parserOptions: {
-        tsconfigRootDir: process.cwd(),
-        project: ['./tsconfig.json'],
-      },
-    },
-  }
-);

jest.config.js

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

jest.setup.js

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

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,17 @@
+const withBundleAnalyzer = require('@next/bundle-analyzer')({
+  enabled: process.env.ANALYZE === 'true',
+});
+
+module.exports = withBundleAnalyzer({
+  reactStrictMode: false,
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+  experimental: {
+    optimizePackageImports: ['@mantine/core', '@mantine/hooks'],
+  },
+
+  sassOptions: {
+    prependData: `@import "./_mantine.scss";`,
+  },
+});

next.config.mjs

@@ -1,12 +0,0 @@
-import bundleAnalyzer from '@next/bundle-analyzer';
-
-const withBundleAnalyzer = bundleAnalyzer({
-  enabled: process.env.ANALYZE === 'true',
-});
-
-export default withBundleAnalyzer({
-  reactStrictMode: false,
-  experimental: {
-    optimizePackageImports: ['@mantine/core', '@mantine/hooks'],
-  },
-});

package.json

@@ -8,60 +8,62 @@
     "analyze": "ANALYZE=true next build",
     "start": "next start",
     "typecheck": "tsc --noEmit",
-    "lint": "npm run eslint && npm run stylelint",
-    "eslint": "eslint .",
-    "stylelint": "stylelint '**/*.css' --cache",
+    "lint": "next lint",
     "jest": "jest",
     "jest:watch": "jest --watch",
     "prettier:check": "prettier --check \"**/*.{ts,tsx}\"",
     "prettier:write": "prettier --write \"**/*.{ts,tsx}\"",
-    "test": "npx next typegen && npm run prettier:check && npm run lint && npm run typecheck && npm run jest",
+    "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": "8.3.6",
-    "@mantine/hooks": "8.3.6",
-    "@next/bundle-analyzer": "^16.0.0",
-    "@tabler/icons-react": "^3.35.0",
-    "next": "16.0.1",
-    "react": "19.2.0",
-    "react-dom": "19.2.0"
+    "@mantine/core": "7.1.3",
+    "@mantine/hooks": "7.1.3",
+    "@next/bundle-analyzer": "^13.5.3",
+    "@tabler/icons-react": "^2.20.0",
+    "next": "13.5.3",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.28.4",
-    "@eslint/eslintrc": "^3",
-    "@eslint/js": "^9.37.0",
-    "@ianvs/prettier-plugin-sort-imports": "^4.7.0",
-    "@storybook/addon-themes": "^10.0.0",
-    "@storybook/nextjs": "^10.0.0",
-    "@storybook/react": "^10.0.0",
-    "@testing-library/dom": "^10.4.1",
-    "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.0",
-    "@testing-library/user-event": "^14.6.1",
-    "@types/eslint-plugin-jsx-a11y": "^6",
-    "@types/jest": "^30.0.0",
-    "@types/node": "^24.7.1",
-    "@types/react": "19.2.2",
-    "babel-loader": "^10.0.0",
-    "eslint": "^9.37.0",
-    "eslint-config-mantine": "^4.0.3",
-    "eslint-config-next": "16.0.1",
-    "eslint-plugin-jsx-a11y": "^6.10.2",
-    "eslint-plugin-react": "^7.37.5",
-    "jest": "^30.2.0",
-    "jest-environment-jsdom": "^30.2.0",
-    "postcss": "^8.5.6",
-    "postcss-preset-mantine": "1.18.0",
+    "@babel/core": "^7.22.1",
+    "@next/eslint-plugin-next": "^13.5.3",
+    "@storybook/addon-essentials": "^7.4.3",
+    "@storybook/addon-styling": "^1.0.8",
+    "@storybook/blocks": "^7.4.3",
+    "@storybook/nextjs": "^7.4.3",
+    "@storybook/react": "^7.4.3",
+    "@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.8.0",
     "postcss-simple-vars": "^7.0.1",
-    "prettier": "^3.6.2",
-    "storybook": "^10.0.0",
-    "stylelint": "^16.25.0",
-    "stylelint-config-standard-scss": "^16.0.0",
-    "ts-jest": "^29.4.4",
-    "typescript": "5.9.3",
-    "typescript-eslint": "^8.46.0"
-  },
-  "packageManager": "yarn@4.10.3"
+    "prettier": "^2.8.8",
+    "sass": "^1.69.3",
+    "storybook": "^7.4.3",
+    "storybook-dark-mode": "^3.0.0",
+    "ts-jest": "^29.1.0",
+    "typescript": "5.2.2"
+  }
 }

renovate.json

@@ -1,13 +0,0 @@
-{
-  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
-  "schedule": ["before 5am on sunday"],
-  "groupName": "all dependencies",
-  "packageRules": [
-    {
-      "matchPackagePatterns": ["*"],
-      "groupName": "all dependencies"
-    }
-  ],
-  "prHourlyLimit": 0,
-  "prConcurrentLimit": 0
-}

test-utils/render.tsx

@@ -5,9 +5,7 @@ import { theme } from '../theme';
 export function render(ui: React.ReactNode) {
   return testingLibraryRender(<>{ui}</>, {
     wrapper: ({ children }: { children: React.ReactNode }) => (
-      <MantineProvider theme={theme} env="test">
-        {children}
-      </MantineProvider>
+      <MantineProvider theme={theme}>{children}</MantineProvider>
     ),
   });
 }

tsconfig.json

@@ -1,8 +1,11 @@
 {
   "compilerOptions": {
-    "types": ["node", "jest", "@testing-library/jest-dom"],
     "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -10,13 +13,15 @@
     "noEmit": true,
     "esModuleInterop": true,
     "module": "esnext",
-    "moduleResolution": "bundler",
+    "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "react-jsx",
+    "jsx": "preserve",
     "incremental": true,
     "paths": {
-      "@/*": ["./*"]
+      "@/*": [
+        "./*"
+      ]
     },
     "plugins": [
       {
@@ -25,13 +30,12 @@
     ]
   },
   "include": [
+    "next-env.d.ts",
     "**/*.ts",
     "**/*.tsx",
-    ".storybook/main.ts",
-    ".storybook/preview.tsx",
-    "next-env.d.ts",
-    ".next/types/**/*.ts",
-    ".next/dev/types/**/*.ts"
+    ".next/types/**/*.ts"
   ],
-  "exclude": ["node_modules"]
+  "exclude": [
+    "node_modules"
+  ]
 }