7.0

.eslintignore

@@ -6,3 +6,4 @@ public
 .cache
 .eslintrc.js
 *.d.ts
+*.js

.eslintrc.js

@@ -4,10 +4,17 @@ module.exports = {
  rules: {
  'jest/no-export': 'off',
  'jest/expect-expect': 'off',
+ 'jest/valid-title': 'off',
  'react/jsx-pascal-case': 'off',
  'newline-per-chained-call': 'off',
+ 'import/extensions': 'off',
+ 'jsx-a11y/label-has-associated-control': 'off',
+ 'react/self-closing-comp': 'off',
+ 'react/jsx-closing-bracket-location': 'off',
+ '@typescript-eslint/no-loop-func': 'off',
+ 'no-restricted-syntax': 'off',
  },
  parserOptions: {
- project: './tsconfig.json',
+ project: './tsconfig.eslint.json',
  },
 };

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -1,5 +1,6 @@
 name: Report an issue with @mantine/ scoped package
 description: Tell us if something is not working as expected
+labels: 'review required'
 body:
  - type: markdown
  attributes:
@@ -17,12 +18,15 @@ body:
  - '@mantine/form'
  - '@mantine/notifications'
  - '@mantine/tiptap'
- - '@mantine/prism'
+ - '@mantine/code-highlight'
  - '@mantine/modals'
  - '@mantine/dropzone'
  - '@mantine/spotlight'
  - '@mantine/nprogress'
  - '@mantine/carousel'
+ - '@mantine/colors-generator'
+ - '@mantine/store'
+ - '@mantine/vanilla-extract'
  validations:
  required: true
  - type: textarea
@@ -34,7 +38,7 @@ body:
  - type: input
  id: version
  attributes:
- label: What version of @mantine/hooks page do you have in package.json?
+ label: What version of @mantine/* page do you have in package.json? (Note that all @mantine/* packages must have the same version in order to work correctly)
  validations:
  required: true
  - type: input

.github/ISSUE_TEMPLATE/docs_report.yml

@@ -1,5 +1,6 @@
 name: Report an issue with mantine.dev website
 description: Nothing is perfect, especially our docs, help us find and fix mistakes, bad wording, etc.
+labels: 'review required'
 body:
  - type: markdown
  attributes:

.github/workflows/pull_request.yml

@@ -16,7 +16,7 @@ jobs:
  - uses: actions/checkout@v3
  - uses: actions/setup-node@v3
  with:
- node-version: '16.10.0'
+ node-version: '18.17.0'
  cache: 'yarn'
  cache-dependency-path: '**/yarn.lock'
  - name: Install dependencies

.gitignore

@@ -34,9 +34,8 @@ docs/.docgen/
 # project
 .eslintcache
 docs/.cache
-docs/public
 storybook-static
 .next
-docs/src/components/Test.tsx
-____*.internal.ts
-____*.internal.tsx
+docs/components/___test.internal.tsx
+src/*/styles.css
+.stylelintcache

.nvmrc

@@ -1 +1 @@
-v16.13.2
+v20.5.0

.storybook/main.js

@@ -0,0 +1,52 @@
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin').default;
+const path = require('path');
+
+module.exports = {
+ stories: ['../src/**/*.story.@(js|jsx|ts|tsx)'],
+ addons: [
+ 'storybook-dark-mode',
+ '@storybook/addon-links',
+ '@storybook/addon-essentials',
+ '@storybook/addon-interactions',
+ {
+ name: 'storybook-css-modules',
+ options: {
+ cssModulesLoaderOptions: {
+ importLoaders: 1,
+ modules: {
+ localIdentName: 'mantine-[hash:base64:7]',
+ },
+ },
+ },
+ },
+ {
+ name: '@storybook/addon-postcss',
+ options: {
+ postcssLoaderOptions: {
+ implementation: require('postcss'),
+ },
+ },
+ },
+ ],
+ framework: '@storybook/react',
+ core: {
+ builder: '@storybook/builder-webpack5',
+ },
+ webpackFinal: async (config) => {
+ config.resolve = {
+ ...config.resolve,
+ plugins: [
+ ...(config.resolve.plugins || []),
+ new TsconfigPathsPlugin({
+ extensions: ['.ts', '.tsx', '.js'],
+ configFile: path.join(__dirname, '../tsconfig.json'),
+ }),
+ ],
+ };
+
+ // Turn off docgen plugin as it breaks bundle with displayName
+ config.plugins.pop();
+
+ return config;
+ },
+};

.storybook/preview.tsx

@@ -0,0 +1,58 @@
+import React, { useEffect } from 'react';
+import addons from '@storybook/addons';
+import { IconTextDirectionLtr, IconTextDirectionRtl } from '@tabler/icons-react';
+import { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode';
+import {
+ MantineProvider,
+ useMantineColorScheme,
+ ActionIcon,
+ DirectionProvider,
+ useDirection,
+} from '@mantine/core';
+import { Notifications } from '@mantine/notifications';
+import { theme } from '../docs/theme';
+
+export const parameters = { layout: 'fullscreen' };
+
+const channel = addons.getChannel();
+
+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 <DirectionProvider>{children}</DirectionProvider>;
+}
+
+function DirectionWrapper({ children }: { children: React.ReactNode }) {
+ const { dir, toggleDirection } = useDirection();
+ return (
+ <>
+ <ActionIcon
+ size="xl"
+ radius="md"
+ variant="default"
+ pos="fixed"
+ bottom={20}
+ right={20}
+ onClick={toggleDirection}
+ style={{ zIndex: 1000 }}
+ aria-label="Toggle text direction"
+ >
+ {dir === 'ltr' ? <IconTextDirectionLtr /> : <IconTextDirectionRtl />}
+ </ActionIcon>
+ <Notifications />
+ {children}
+ </>
+ );
+}
+
+export const decorators = [
+ (renderStory: any) => <DirectionWrapper>{renderStory()}</DirectionWrapper>,
+ (renderStory: any) => <ColorSchemeWrapper>{renderStory()}</ColorSchemeWrapper>,
+ (renderStory: any) => <MantineProvider theme={theme}>{renderStory()}</MantineProvider>,
+];

.stylelintignore

@@ -0,0 +1,4 @@
+src/*/esm/**/*.css
+src/*/cjs/**/*.css
+docs/.next
+docs/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"]
+ }
+ ]
+ }
+}

.syncpackrc.json

@@ -1,6 +1,27 @@
 {
- "dev": true,
- "peer": false,
- "prod": true,
- "source": ["package.json", "src/*/package.json", "docs/package.json"]
+ "dependencyTypes": ["dev", "prod", "peer"],
+ "source": ["package.json", "src/*/package.json", "docs/package.json"],
+ "versionGroups": [
+ {
+ "packages": ["docs"],
+ "dependencies": [
+ "@mantine/store",
+ "@mantine/styles-api",
+ "@mantine/code-highlight",
+ "@mantine/core",
+ "@mantine/ds",
+ "@mantine/hooks",
+ "@mantine/notifications",
+ "@mantine/spotlight",
+ "@mantine/carousel",
+ "@mantine/dropzone",
+ "@mantine/form",
+ "@mantine/nprogress",
+ "@mantine/dates",
+ "@mantine/modals",
+ "@mantine/tiptap"
+ ],
+ "isIgnored": true
+ }
+ ]
 }

.tool-versions

@@ -1 +1 @@
-nodejs 16.13.2
+nodejs 14.17.0