Add sass example

.eslintignore

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

.eslintrc.cjs

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

.nvmrc

@@ -1 +1 @@
-v24.3.0
+v20.9.0

.storybook/main.ts

@@ -7,7 +7,7 @@ const config: StorybookConfig = {
     enableCrashReports: false,
   },
   stories: ['../components/**/*.(stories|story).@(js|jsx|ts|tsx)'],
-  addons: ['@storybook/addon-themes'],
+  addons: ['storybook-dark-mode'],
   framework: {
     name: '@storybook/nextjs',
     options: {},

.storybook/preview.tsx

@@ -1,40 +1,33 @@
 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,
-    storySort: (a: any, b: any) => a.title.localeCompare(b.title, undefined, { numeric: true }),
   },
-  backgrounds: { disable: true },
 };
 
-export const globalTypes = {
+const channel = addons.getChannel();
-  theme: {
+
-    name: 'Theme',
+function ColorSchemeWrapper({ children }: { children: React.ReactNode }) {
-    description: 'Mantine color scheme',
+  const { setColorScheme } = useMantineColorScheme();
-    defaultValue: 'light',
+  const handleColorScheme = (value: boolean) => setColorScheme(value ? 'dark' : 'light');
-    toolbar: {
+
-      icon: 'mirror',
+  useEffect(() => {
-      items: [
+    channel.on(DARK_MODE_EVENT_NAME, handleColorScheme);
-        { value: 'light', title: 'Light' },
+    return () => channel.off(DARK_MODE_EVENT_NAME, handleColorScheme);
-        { value: 'dark', title: 'Dark' },
+  }, [channel]);
-      ],
+
-    },
+  return <>{children}</>;
-  },
+}
-};
 
 export const decorators = [
-  (renderStory: any, context: any) => {
+  (renderStory: any) => <ColorSchemeWrapper>{renderStory()}</ColorSchemeWrapper>,
-    const scheme = (context.globals.theme || 'light') as 'light' | 'dark';
+  (renderStory: any) => <MantineProvider theme={theme}>{renderStory()}</MantineProvider>,
-    return (
-      <MantineProvider theme={theme} forceColorScheme={scheme}>
-        <ColorSchemeScript />
-        {renderStory()}
-      </MantineProvider>
-    );
-  },
 ];

.yarnrc.yml

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

_mantine.scss

@@ -0,0 +1,64 @@
+@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;
+    }
+  }
+}
+
+@mixin smaller-than($breakpoint) {
+  @media (max-width: $breakpoint) {
+    @content;
+  }
+}
+
+@mixin larger-than($breakpoint) {
+  @media (min-width: $breakpoint) {
+    @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,7 @@
 import '@mantine/core/styles.css';
 
 import React from 'react';
-import { ColorSchemeScript, mantineHtmlProps, MantineProvider } from '@mantine/core';
+import { ColorSchemeScript, MantineProvider } from '@mantine/core';
 import { theme } from '../theme';
 
 export const metadata = {
@@ -11,7 +11,7 @@ export const metadata = {
 
 export default function RootLayout({ children }: { children: any }) {
   return (
-    <html lang="en" {...mantineHtmlProps}>
+    <html lang="en" suppressHydrationWarning>
       <head>
         <ColorSchemeScript />
         <link rel="shortcut icon" href="/favicon.svg" />

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

components/Welcome/Welcome.tsx

@@ -1,5 +1,5 @@
+import classes from './Welcome.module.scss';
 import { Anchor, Text, Title } from '@mantine/core';
-import classes from './Welcome.module.css';
 
 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'],
-      },
-    },
-  }
-);

next-env.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-/// <reference path="./.next/types/routes.d.ts" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

next.config.mjs

@@ -1,3 +1,4 @@
+import path from 'path';
 import bundleAnalyzer from '@next/bundle-analyzer';
 
 const withBundleAnalyzer = bundleAnalyzer({
@@ -12,4 +13,9 @@ export default withBundleAnalyzer({
   experimental: {
     optimizePackageImports: ['@mantine/core', '@mantine/hooks'],
   },
+
+  sassOptions: {
+    implementation: 'sass-embedded',
+    additionalData: `@use "${path.join(process.cwd(), '_mantine')}" as mantine;`,
+  },
 });

package.json

@@ -8,9 +8,8 @@
     "analyze": "ANALYZE=true next build",
     "start": "next start",
     "typecheck": "tsc --noEmit",
-    "lint": "npm run eslint && npm run stylelint",
+    "lint": "next lint && npm run lint:stylelint",
-    "eslint": "eslint .",
+    "lint:stylelint": "stylelint '**/*.css' --cache",
-    "stylelint": "stylelint '**/*.css' --cache",
     "jest": "jest",
     "jest:watch": "jest --watch",
     "prettier:check": "prettier --check \"**/*.{ts,tsx}\"",
@@ -20,48 +19,53 @@
     "storybook:build": "storybook build"
   },
   "dependencies": {
-    "@mantine/core": "8.3.2",
+    "@mantine/core": "7.13.4",
-    "@mantine/hooks": "8.3.2",
+    "@mantine/hooks": "7.13.4",
-    "@next/bundle-analyzer": "^15.5.3",
+    "@next/bundle-analyzer": "^14.2.4",
-    "@tabler/icons-react": "^3.34.1",
+    "@tabler/icons-react": "^3.6.0",
-    "next": "15.5.3",
+    "next": "15.0.1",
-    "react": "19.1.1",
+    "react": "18.3.1",
-    "react-dom": "19.1.1"
+    "react-dom": "18.3.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.28.4",
+    "@babel/core": "^7.24.7",
-    "@eslint/eslintrc": "^3",
+    "@ianvs/prettier-plugin-sort-imports": "^4.3.1",
-    "@eslint/js": "^9.35.0",
+    "@next/eslint-plugin-next": "^14.2.4",
-    "@ianvs/prettier-plugin-sort-imports": "^4.7.0",
+    "@storybook/nextjs": "^8.1.10",
-    "@storybook/addon-themes": "^9.1.5",
+    "@storybook/react": "^8.1.10",
-    "@storybook/nextjs": "^9.1.5",
+    "@testing-library/dom": "^10.1.0",
-    "@storybook/react": "^9.1.5",
+    "@testing-library/jest-dom": "^6.4.6",
-    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.0.0",
-    "@testing-library/jest-dom": "^6.8.0",
+    "@testing-library/user-event": "^14.5.2",
-    "@testing-library/react": "^16.3.0",
+    "@types/jest": "^29.5.12",
-    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^20.14.8",
-    "@types/eslint-plugin-jsx-a11y": "^6",
+    "@types/react": "18.3.3",
-    "@types/jest": "^30.0.0",
+    "@typescript-eslint/eslint-plugin": "^7.13.1",
-    "@types/node": "^24.3.1",
+    "@typescript-eslint/parser": "^7.13.1",
-    "@types/react": "19.1.12",
+    "babel-loader": "^9.1.3",
-    "babel-loader": "^10.0.0",
+    "eslint": "^8.57.0",
-    "eslint": "^9.35.0",
+    "eslint-config-airbnb": "19.0.4",
-    "eslint-config-mantine": "^4.0.3",
+    "eslint-config-airbnb-typescript": "^18.0.0",
-    "eslint-config-next": "15.5.3",
+    "eslint-config-mantine": "3.2.0",
-    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-jest": "^28.6.0",
-    "jest": "^30.1.3",
+    "eslint-plugin-jsx-a11y": "^6.9.0",
-    "jest-environment-jsdom": "^30.1.2",
+    "eslint-plugin-react": "^7.34.3",
-    "postcss": "^8.5.6",
+    "eslint-plugin-react-hooks": "^4.6.2",
-    "postcss-preset-mantine": "1.18.0",
+    "eslint-plugin-testing-library": "^6.2.2",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "postcss": "^8.4.38",
+    "postcss-preset-mantine": "1.17.0",
     "postcss-simple-vars": "^7.0.1",
-    "prettier": "^3.6.2",
+    "prettier": "^3.3.2",
-    "storybook": "^9.1.5",
+    "sass-embedded": "^1.80.6",
-    "stylelint": "^16.24.0",
+    "storybook": "^8.1.10",
-    "stylelint-config-standard-scss": "^16.0.0",
+    "storybook-dark-mode": "^4.0.2",
-    "ts-jest": "^29.4.1",
+    "stylelint": "^16.6.1",
-    "typescript": "5.9.2",
+    "stylelint-config-standard-scss": "^13.1.0",
-    "typescript-eslint": "^8.43.0"
+    "ts-jest": "^29.1.5",
+    "typescript": "5.5.2"
   },
-  "packageManager": "yarn@4.10.3"
+  "packageManager": "yarn@4.5.1"
 }

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">
+      <MantineProvider theme={theme}>{children}</MantineProvider>
-        {children}
-      </MantineProvider>
     ),
   });
 }

tsconfig.json

@@ -17,14 +17,9 @@
     "incremental": true,
     "paths": {
       "@/*": ["./*"]
-    }
     },
-  "include": [
+    "plugins": [{ "name": "next" }]
-    "next-env.d.ts",
+  },
-    "**/*.ts",
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-    "**/*.tsx",
-    ".storybook/main.ts",
-    ".storybook/preview.tsx"
-  ],
   "exclude": ["node_modules"]
 }