Add sass example

.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

.nvmrc

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

.prettierrc.cjs

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

.prettierrc.mjs

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

.storybook/preview.tsx

@@ -1,10 +1,18 @@
 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';
 
+export const parameters = {
+  layout: 'fullscreen',
+  options: {
+    showPanel: false,
+  },
+};
+
 const channel = addons.getChannel();
 
 function ColorSchemeWrapper({ children }: { children: React.ReactNode }) {

.yarnrc.yml

@@ -1,2 +1,3 @@
 nodeLinker: node-modules
-yarnPath: .yarn/releases/yarn-4.0.1.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,6 +1,7 @@
 import '@mantine/core/styles.css';
+
 import React from 'react';
-import { MantineProvider, ColorSchemeScript } from '@mantine/core';
+import { ColorSchemeScript, MantineProvider } from '@mantine/core';
 import { theme } from '../theme';
 
 export const metadata = {
@@ -10,7 +11,7 @@ export const metadata = {
 
 export default function RootLayout({ children }: { children: any }) {
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
       <head>
         <ColorSchemeScript />
         <link rel="shortcut icon" href="/favicon.svg" />

app/page.tsx

@@ -1,5 +1,5 @@
-import { Welcome } from '../components/Welcome/Welcome';
 import { ColorSchemeToggle } from '../components/ColorSchemeToggle/ColorSchemeToggle';
+import { Welcome } from '../components/Welcome/Welcome';
 
 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,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.test.tsx

@@ -1,9 +1,7 @@
-import { render, screen, tests } from '@/test-utils';
+import { render, screen } from '@/test-utils';
 import { Welcome } from './Welcome';
 
 describe('Welcome component', () => {
-  tests.itSupportsClassName({ component: Welcome, props: {} });
-
   it('has correct Next.js theming section link', () => {
     render(<Welcome />);
     expect(screen.getByText('this guide')).toHaveAttribute(

components/Welcome/Welcome.tsx

@@ -1,9 +1,9 @@
-import { Title, Text, Anchor } from '@mantine/core';
-import classes from './Welcome.module.css';
+import classes from './Welcome.module.scss';
+import { Anchor, Text, Title } from '@mantine/core';
 
-export function Welcome(props: React.ComponentPropsWithoutRef<'div'>) {
+export function Welcome() {
   return (
-    <div {...props}>
+    <>
       <Title className={classes.title} ta="center" mt={100}>
         Welcome to{' '}
         <Text inherit variant="gradient" component="span" gradient={{ from: 'pink', to: 'yellow' }}>
@@ -18,6 +18,6 @@ export function Welcome(props: React.ComponentPropsWithoutRef<'div'>) {
         </Anchor>
         . To get started edit page.tsx file.
       </Text>
-    </div>
+    </>
   );
 }

jest.setup.cjs

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

next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/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

@@ -19,56 +19,53 @@
     "storybook:build": "storybook build"
   },
   "dependencies": {
-    "@mantine/core": "7.2.2",
-    "@mantine/hooks": "7.2.2",
-    "@next/bundle-analyzer": "^14.0.1",
-    "@tabler/icons-react": "^2.40.0",
-    "next": "14.0.1",
-    "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "@mantine/core": "7.13.4",
+    "@mantine/hooks": "7.13.4",
+    "@next/bundle-analyzer": "^14.2.4",
+    "@tabler/icons-react": "^3.6.0",
+    "next": "15.0.1",
+    "react": "18.3.1",
+    "react-dom": "18.3.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.2",
-    "@mantine-tests/core": "^1.0.1",
-    "@next/eslint-plugin-next": "^14.0.1",
-    "@storybook/addon-essentials": "^7.5.2",
-    "@storybook/addon-styling-webpack": "^0.0.5",
-    "@storybook/blocks": "^7.5.2",
-    "@storybook/nextjs": "^7.5.2",
-    "@storybook/react": "^7.5.2",
-    "@testing-library/dom": "^9.3.3",
-    "@testing-library/jest-dom": "^6.1.4",
-    "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.5.1",
-    "@types/jest": "^29.5.7",
-    "@types/node": "^20.8.10",
-    "@types/react": "18.2.34",
-    "@typescript-eslint/eslint-plugin": "^6.9.1",
-    "@typescript-eslint/parser": "^6.9.1",
+    "@babel/core": "^7.24.7",
+    "@ianvs/prettier-plugin-sort-imports": "^4.3.1",
+    "@next/eslint-plugin-next": "^14.2.4",
+    "@storybook/nextjs": "^8.1.10",
+    "@storybook/react": "^8.1.10",
+    "@testing-library/dom": "^10.1.0",
+    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/jest": "^29.5.12",
+    "@types/node": "^20.14.8",
+    "@types/react": "18.3.3",
+    "@typescript-eslint/eslint-plugin": "^7.13.1",
+    "@typescript-eslint/parser": "^7.13.1",
     "babel-loader": "^9.1.3",
-    "eslint": "^8.53.0",
+    "eslint": "^8.57.0",
     "eslint-config-airbnb": "19.0.4",
-    "eslint-config-airbnb-typescript": "^17.1.0",
-    "eslint-config-mantine": "3.0.0",
-    "eslint-plugin-import": "^2.29.0",
-    "eslint-plugin-jest": "^27.6.0",
-    "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-testing-library": "^6.1.0",
+    "eslint-config-airbnb-typescript": "^18.0.0",
+    "eslint-config-mantine": "3.2.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-jest": "^28.6.0",
+    "eslint-plugin-jsx-a11y": "^6.9.0",
+    "eslint-plugin-react": "^7.34.3",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-testing-library": "^6.2.2",
     "jest": "^29.7.0",
-    "jest-axe": "^8.0.0",
     "jest-environment-jsdom": "^29.7.0",
-    "postcss": "^8.4.31",
-    "postcss-preset-mantine": "1.11.0",
+    "postcss": "^8.4.38",
+    "postcss-preset-mantine": "1.17.0",
     "postcss-simple-vars": "^7.0.1",
-    "prettier": "^3.0.3",
-    "storybook": "^7.5.2",
-    "storybook-dark-mode": "^3.0.1",
-    "stylelint": "^15.11.0",
-    "stylelint-config-standard-scss": "^11.1.0",
-    "ts-jest": "^29.1.1",
-    "typescript": "5.2.2"
+    "prettier": "^3.3.2",
+    "sass-embedded": "^1.80.6",
+    "storybook": "^8.1.10",
+    "storybook-dark-mode": "^4.0.2",
+    "stylelint": "^16.6.1",
+    "stylelint-config-standard-scss": "^13.1.0",
+    "ts-jest": "^29.1.5",
+    "typescript": "5.5.2"
   },
-  "packageManager": "yarn@4.0.1"
+  "packageManager": "yarn@4.5.1"
 }

test-utils/index.ts

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